Last active
January 7, 2017 08:51
-
-
Save gist-master/38ead64ee92d684da566078b1a0f65c2 to your computer and use it in GitHub Desktop.
recreate
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<require from="aurelia-kendoui-bridge/datetimepicker/datetimepicker"></require> | |
<require from="aurelia-kendoui-bridge/datepicker/datepicker"></require> | |
<require from="aurelia-kendoui-bridge/button/button"></require> | |
<require from="aurelia-kendoui-bridge/grid/grid"></require> | |
<require from="aurelia-kendoui-bridge/grid/col"></require> | |
<require from="aurelia-kendoui-bridge/scheduler/scheduler"></require> | |
<require from="aurelia-kendoui-bridge/dropdownlist/dropdownlist"></require> | |
<require from="aurelia-kendoui-bridge/chart/chart"></require> | |
<require from="aurelia-kendoui-bridge/listview/listview"></require> | |
<require from="aurelia-kendoui-bridge/common/template"></require> | |
<require from="aurelia-kendoui-bridge/treeview/treeview"></require> | |
<require from="aurelia-kendoui-bridge/treelist/treelist"></require> | |
<require from="aurelia-kendoui-bridge/treelist/tree-col"></require> | |
<require from="aurelia-kendoui-bridge/pivotgrid/pivotgrid"></require> | |
<require from="aurelia-kendoui-bridge/pivotgrid/pivotconfigurator"></require> | |
<require from="aurelia-kendoui-bridge/spreadsheet/spreadsheet"></require> | |
<require from="aurelia-kendoui-bridge/colorpalette/colorpalette"></require> | |
<require from="aurelia-kendoui-bridge/colorpicker/colorpicker"></require> | |
<require from="aurelia-kendoui-bridge/combobox/combobox"></require> | |
<require from="aurelia-kendoui-bridge/editor/editor"></require> | |
<require from="aurelia-kendoui-bridge/numerictextbox/numerictextbox"></require> | |
<require from="aurelia-kendoui-bridge/maskedtextbox/maskedtextbox"></require> | |
<require from="aurelia-kendoui-bridge/multiselect/multiselect"></require> | |
<require from="aurelia-kendoui-bridge/slider/slider"></require> | |
<require from="aurelia-kendoui-bridge/rangeslider/rangeslider"></require> | |
<require from="aurelia-kendoui-bridge/timepicker/timepicker"></require> | |
<require from="aurelia-kendoui-bridge/upload/upload"></require> | |
<require from="aurelia-kendoui-bridge/switch/switch"></require> | |
<require from="aurelia-kendoui-bridge/calendar/calendar"></require> | |
<require from="aurelia-kendoui-bridge/gantt/gantt"></require> | |
<require from="aurelia-kendoui-bridge/gantt/gantt-col"></require> | |
<require from="aurelia-kendoui-bridge/buttongroup/buttongroup"></require> | |
<require from="aurelia-kendoui-bridge/tabstrip/tabstrip"></require> | |
<require from="aurelia-kendoui-bridge/menu/menu"></require> | |
<require from="aurelia-kendoui-bridge/toolbar/toolbar"></require> | |
<require from="aurelia-kendoui-bridge/toolbar/toolbar-item"></require> | |
<require from="aurelia-kendoui-bridge/map/map"></require> | |
<require from="aurelia-kendoui-bridge/diagram/diagram"></require> | |
<require from="aurelia-kendoui-bridge/barcode/barcode"></require> | |
<div id="example"> | |
<p>Some controls may not be destroyed correctly</p> | |
<hr> | |
<h3>Barcode</h3> | |
<span ak-barcode="k-value: 2346722; k-type: ean8; k-width.bind: 280; k-height.bind: 100" | |
ak-barcode.ref="barcode"></span> | |
<button click.delegate="barcode.destroy()" ak-button>destroy</button> | |
<button click.delegate="barcode.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Diagram</h3> | |
<ak-diagram k-data-source.bind="diagramDataSource" | |
view-model.ref="diagram"> | |
</ak-diagram> | |
<button click.delegate="diagram.destroy()" ak-button>destroy</button> | |
<button click.delegate="diagram.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Map</h3> | |
<ak-map k-center.bind = "mapCenter" | |
k-zoom.bind = "3" | |
k-layers.bind = "mapLayers" | |
k-markers.bind = "mapMarkers" | |
view-model.ref="map"> | |
</ak-map> | |
<button click.delegate="map.destroy()" ak-button>destroy</button> | |
<button click.delegate="map.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Toolbar</h3> | |
<ak-toolbar view-model.ref="toolbar"> | |
<ak-toolbar-item k-type="button" k-id="button1" k-text="Button 1"></ak-toolbar-item> | |
<ak-toolbar-item k-type="button" k-id="button2" k-text="Button 2"></ak-toolbar-item> | |
</ak-toolbar> | |
<button click.delegate="toolbar.destroy()" ak-button>destroy</button> | |
<button click.delegate="toolbar.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Menu</h3> | |
<ul id="menu-images" ak-menu="k-data-source.bind: menuDataSource" ak-menu.ref="menu"></ul> | |
<button click.delegate="menu.destroy()" ak-button>destroy</button> | |
<button click.delegate="menu.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>PanelBar</h3> | |
<ak-panel-bar | |
k-expand-mode="single" | |
k-content-urls.bind="contentUrls" | |
view-model.ref="panelBar" | |
id="panelbar"> | |
<li class="k-state-active"> | |
Metallica - Master of Puppets 1986 | |
<ul> | |
<li>Battery</li> | |
<li>Master of Puppets</li> | |
<li>The Thing That Should Not Be</li> | |
<li>Welcome Home (Sanitarium)</li> | |
<li>Disposable Heroes</li> | |
<li>Leper Messiah</li> | |
<li>Orion (Instrumental)</li> | |
<li>Damage, Inc.</li> | |
</ul> | |
</li> | |
<li> | |
Iron Maiden - Brave New World 2000 | |
<ul> | |
<li>The Wicker Man</li> | |
<li>Ghost Of The Navigator</li> | |
<li>Brave New World</li> | |
<li>Blood Brothers</li> | |
<li>The Mercenary</li> | |
<li>Dream Of Mirrors</li> | |
<li>The Fallen Angel</li> | |
<li>The Nomad</li> | |
<li>Out Of The Silent Planet</li> | |
<li>The Thin Line Between Love And Hate</li> | |
</ul> | |
</li> | |
<li> | |
Empty Item | |
</li> | |
<li> | |
Ajax Item | |
<div></div> | |
</li> | |
<li> | |
Error Item | |
<div></div> | |
</li> | |
</ak-panel-bar> | |
<button click.delegate="panelBar.destroy()" ak-button>destroy</button> | |
<button click.delegate="panelBar.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>ButtonGroup</h3> | |
<ul ak-buttongroup="k-index.bind: 0" | |
ak-buttongroup.ref="buttonGroup" | |
style="margin: 0 auto;"> | |
<li> | |
Month | |
</li> | |
<li> | |
Quarter | |
</li> | |
<li> | |
Year | |
</li> | |
</ul> | |
<button click.delegate="buttonGroup.destroy()" ak-button>destroy</button> | |
<button click.delegate="buttonGroup.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Button</h3> | |
<button ak-button ak-button.ref="button">Button</button> | |
<button click.delegate="button.destroy()" ak-button>destroy</button> | |
<button click.delegate="button.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Gantt</h3> | |
<ak-gantt k-data-source.bind="tasksDataSource" | |
k-dependencies.bind="dependenciesDataSource" | |
k-views.bind="['day', {type:'week', selected: true}, 'month']" | |
k-height.bind="700" | |
view-model.ref="gantt"> | |
<ak-gantt-col k-field="id" k-title="ID" k-width.bind="60"></ak-gantt-col> | |
<ak-gantt-col k-field="title" k-title="Title" k-editable.bind="true" k-sortable.bind="true"></ak-gantt-col> | |
<ak-gantt-col k-field="start" k-title="Start Time" k-format="{0:MM/dd/yyyy}" k-width.bind="100" k-editable.bind="true" k-sortable.bind="true"></ak-gantt-col> | |
<ak-gantt-col k-field="end" k-title="End Time" k-format="{0:MM/dd/yyyy}" k-width.bind="100" k-editable.bind="true" k-sortable.bind="true"></ak-gantt-col> | |
</ak-gantt> | |
<button click.delegate="gantt.destroy()" ak-button>destroy</button> | |
<button click.delegate="gantt.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Tabstrip</h3> | |
<div id="tabstrip" ak-tabstrip.ref="tabstrip" ak-tabstrip="k-animation.bind: { open: { effects: 'fadeIn' } }"> | |
<ul> | |
<li class="k-state-active"> | |
Paris | |
</li> | |
<li> | |
New York | |
</li> | |
<li> | |
London | |
</li> | |
<li> | |
Moscow | |
</li> | |
</ul> | |
<div> | |
<span class="rainy"> </span> | |
<div class="weather"> | |
<h2>17<span>ºC</span></h2> | |
<p>Rainy weather in Paris.</p> | |
</div> | |
</div> | |
<div> | |
<span class="sunny"> </span> | |
<div class="weather"> | |
<h2>29<span>ºC</span></h2> | |
<p>Sunny weather in New York.</p> | |
</div> | |
</div> | |
<div> | |
<span class="sunny"> </span> | |
<div class="weather"> | |
<h2>21<span>ºC</span></h2> | |
<p>Sunny weather in London.</p> | |
</div> | |
</div> | |
<div> | |
<span class="cloudy"> </span> | |
<div class="weather"> | |
<h2>16<span>ºC</span></h2> | |
<p>Cloudy weather in Moscow.</p> | |
</div> | |
</div> | |
</div> | |
<button click.delegate="tabstrip.destroy()" ak-button>destroy</button> | |
<button click.delegate="tabstrip.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Calendar</h3> | |
<ak-calendar view-model.ref="calendar"></ak-calendar> | |
<button click.delegate="calendar.destroy()" ak-button>destroy</button> | |
<button click.delegate="calendar.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Switch</h3> | |
<input ak-switch ak-switch.ref="switch" type="checkbox" checked="true"/> | |
<button click.delegate="switch.destroy()" ak-button>destroy</button> | |
<button click.delegate="switch.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Upload</h3> | |
<ak-upload view-model.ref="upload"> | |
<input name="files" type="file"/> | |
</ak-upload> | |
<button click.delegate="upload.destroy()" ak-button>destroy</button> | |
<button click.delegate="upload.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>TimePicker</h3> | |
<input id="timepicker" ak-timepicker="k-value: 10:00AM" ak-timepicker.ref="timepicker" style="width: 100%;" /> | |
<button click.delegate="timepicker.destroy()" ak-button>destroy</button> | |
<button click.delegate="timepicker.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>RangeSlider</h3> | |
<ak-range-slider ak-range-slider.ref="rslider"> | |
</ak-range-slider> | |
<button click.delegate="rslider.destroy()" ak-button>destroy</button> | |
<button click.delegate="rslider.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Slider</h3> | |
<input ak-slider="k-increase-button-title: Right; | |
k-decrease-button-title: Left; | |
k-min.bind: -10; | |
k-max.bind: 10; | |
k-small-step.bind: 2; | |
k-large-step.bind: 1" class="balSlider" value="0" ak-slider.ref="slider"/> | |
<button click.delegate="slider.destroy()" ak-button>destroy</button> | |
<button click.delegate="slider.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Multiselect</h3> | |
<ak-multiselect k-value.two-way="required" view-model.ref="multiselect"> | |
<select multiple="multiple" data-placeholder="Select attendees..."> | |
<option>Steven White</option> | |
<option>Nancy King</option> | |
<option>Nancy Davolio</option> | |
<option>Robert Davolio</option> | |
<option>Michael Leverling</option> | |
<option>Andrew Callahan</option> | |
<option>Michael Suyama</option> | |
<option selected>Anne King</option> | |
<option>Laura Peacock</option> | |
<option>Robert Fuller</option> | |
<option>Janet White</option> | |
<option>Nancy Leverling</option> | |
<option>Robert Buchanan</option> | |
<option>Margaret Buchanan</option> | |
<option selected>Andrew Fuller</option> | |
<option>Anne Davolio</option> | |
<option>Andrew Suyama</option> | |
<option>Nige Buchanan</option> | |
<option>Laura Fuller</option> | |
</select> | |
</ak-multiselect> | |
<button click.delegate="multiselect.destroy()" ak-button>destroy</button> | |
<button click.delegate="multiselect.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Maskedtextbox</h3> | |
<input id="phone_number" ak-maskedtextbox="k-value: 555 123 4567; k-mask: (999) 000-0000" ak-maskedtextbox.ref="mtextbox" /> | |
<button click.delegate="mtextbox.destroy()" ak-button>destroy</button> | |
<button click.delegate="mtextbox.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Numerictextbox</h3> | |
<input id="custom" ak-numerictextbox="k-value.bind : 2; k-format.bind: '#.00kg'" ak-numerictextbox.ref="ntextbox" style="width: 100%;" /> | |
<button click.delegate="ntextbox.destroy()" ak-button>destroy</button> | |
<button click.delegate="ntextbox.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Editor</h3> | |
<textarea ak-rich-editor ak-rich-editor.ref="editor" style="height:440px"> | |
<p><img src="http://demos.telerik.com/kendo-ui/content/web/editor/kendo-ui-web.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" /></p> | |
<p> | |
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br /> | |
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, | |
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows | |
accessibility standards and provides API for content manipulation. | |
</p> | |
<p>Features include:</p> | |
<ul> | |
<li>Text formatting & alignment</li> | |
<li>Bulleted and numbered lists</li> | |
<li>Hyperlink and image dialogs</li> | |
<li>Cross-browser support</li> | |
<li>Identical HTML output across browsers</li> | |
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li> | |
</ul> | |
<p> | |
Read <a href="http://docs.telerik.com/kendo-ui">more details</a> or send us your | |
<a href="http://www.telerik.com/forums/">feedback</a>! | |
</p> | |
</textarea> | |
<button click.delegate="editor.destroy()" ak-button>destroy</button> | |
<button click.delegate="editor.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Combobox</h3> | |
<ak-combobox k-data-text-field="text" | |
k-data-value-field="value" | |
k-data-source.bind="comboboxData" | |
k-value.two-way="fabric" | |
k-filter="contains" | |
k-suggest.bind="true" | |
view-model.ref="combobox" | |
style="width: 100%;"> | |
</ak-combobox> | |
<button click.delegate="combobox.destroy()" ak-button>destroy</button> | |
<button click.delegate="combobox.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Color palette</h3> | |
<style> | |
#palette { | |
vertical-align: top; | |
display: inline-block; | |
} | |
</style> | |
<ak-color-palette k-columns.bind="4" | |
k-palette.bind="palette" | |
k-tile-size.bind="{ width: 34, height: 19 }" | |
view-model.ref="paletteVM"></ak-color-palette> | |
<button click.delegate="paletteVM.destroy()" ak-button>destroy</button> | |
<button click.delegate="paletteVM.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Colorpicker</h3> | |
<input ak-color-picker="k-value: #ffffff" id="picker" ak-color-picker.ref="colorPicker"/> | |
<button click.delegate="colorPicker.destroy()" ak-button>destroy</button> | |
<button click.delegate="colorPicker.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Autocomplete</h3> | |
<ak-autocomplete k-data-source.bind="autocompleteItems" view-model.ref="autocomplete"> | |
<input style="width: 100%;"> | |
</ak-autocomplete> | |
<button click.delegate="autocomplete.destroy()" ak-button>destroy</button> | |
<button click.delegate="autocomplete.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Spreadsheet</h3> | |
<ak-spreadsheet style="width: 100%" | |
k-excel.bind="{ proxyURL: '//demos.telerik.com/kendo-ui/service/export' }" | |
k-pdf.bind="{ proxyURL: '//demos.telerik.com/kendo-ui/service/export' }" | |
k-sheets.bind="sheets" | |
view-model.ref="spreadsheet"> | |
</ak-spreadsheet> | |
<button click.delegate="spreadsheet.destroy()" ak-button>destroy</button> | |
<button click.delegate="spreadsheet.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Pivot grid</h3> | |
<style> | |
#pivotgrid { | |
width: 70%; | |
} | |
.hidden-on-narrow { | |
display: inline-block; | |
vertical-align: top; | |
} | |
</style> | |
<ak-pivot-configurator class="hidden-on-narrow" | |
k-data-source.bind="pivotGridDataSource" | |
k-filterable.bind="true" | |
k-sortable.bind="true" | |
k-height.bind="500" | |
view-model.ref="configurator" | |
style="display: inline-block"></ak-pivot-configurator> | |
<ak-pivot-grid id="pivotgrid" | |
class="hidden-on-narrow" | |
k-filterable.bind="true" | |
k-sortable.bind="true" | |
k-column-width.bind="200" | |
k-height.bind="580" | |
view-model.ref="pivotgrid" | |
k-data-source.bind="pivotGridDataSource" | |
style="display: inline-block"> | |
</ak-pivot-grid> | |
<button click.delegate="pivotgrid.destroy()" ak-button>destroy grid</button> | |
<button click.delegate="pivotgrid.recreate()" ak-button>recreate grid</button> | |
<button click.delegate="configurator.destroy()" ak-button>destroy configurator</button> | |
<button click.delegate="configurator.recreate()" ak-button>recreate configurator</button> | |
<hr> | |
<h3>Treelist</h3> | |
<ak-tree-list k-data-source.bind="treeListDataSource" k-height.bind="540" view-model.ref="treelist"> | |
<ak-tree-col k-field="Position"></ak-tree-col> | |
<ak-tree-col k-field="Name"></ak-tree-col> | |
<ak-tree-col k-field="Phone"></ak-tree-col> | |
</ak-tree-list> | |
<button click.delegate="treelist.destroy()" ak-button>destroy</button> | |
<button click.delegate="treelist.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Listview</h3> | |
<style> | |
.product { display: inline-block; width: 200px; } | |
</style> | |
<ak-list-view k-data-source.bind="listViewDataSource" view-model.ref="listview"> | |
<ak-template> | |
<div class="product"> | |
<img src="http://demos.telerik.com/kendo-ui/content/web/foods/${ProductID}.jpg" alt="${ProductName} image" /> | |
<h3>${ProductName}</h3> | |
</div> | |
</ak-template> | |
</ak-list-view> | |
<button click.delegate="listview.destroy()" ak-button>destroy</button> | |
<button click.delegate="listview.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Treeview</h3> | |
<ak-treeview k-data-source.bind="treeviewDataSource" id="treeview-left" view-model.ref="treeview"></ak-treeview> | |
<button click.delegate="treeview.destroy()" ak-button>destroy</button> | |
<button click.delegate="treeview.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Chart</h3> | |
<ak-chart k-title.bind="{text: 'Site Visitors Stats \n /thousands/'}" | |
k-legend.bind="{position: 'bottom'}" | |
k-series-defaults.bind="{ | |
type: 'bar' | |
}" | |
k-series.bind="[{ | |
name: 'Total Visits', | |
data: [56000, 63000, 74000, 91000, 117000, 138000] | |
}, { | |
name: 'Unique visitors', | |
data: [52000, 34000, 23000, 48000, 67000, 83000] | |
}]" | |
k-value-axis.bind="{ | |
max: 140000, | |
line: { | |
visible: false | |
}, | |
minorGridLines: { | |
visible: true | |
}, | |
labels: { | |
rotation: 'auto' | |
} | |
}" | |
k-category-axis.bind="{ | |
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], | |
majorGridLines: { | |
visible: false | |
} | |
}" | |
view-model.ref="chart"> | |
</ak-chart> | |
<button click.delegate="chart.destroy()" ak-button>destroy</button> | |
<button click.delegate="chart.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Dropdownlist</h3> | |
<ak-drop-down-list view-model.ref="dropdownlist"> | |
<select style="width: 100%;"> | |
<option>S - 6 3/4"</option> | |
<option>M - 7 1/4"</option> | |
<option>L - 7 1/8"</option> | |
<option>XL - 7 5/8"</option> | |
</select> | |
</ak-drop-down-list> | |
<button click.delegate="dropdownlist.destroy()" ak-button>destroy</button> | |
<button click.delegate="dropdownlist.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Scheduler</h3> | |
<ak-scheduler k-height.bind="400" | |
k-timezone="Etc/UTC" | |
k-views.bind="[ | |
'day', | |
{ type: 'workWeek', selected: true }, | |
'week', | |
'month', | |
'agenda', | |
{ type: 'timeline', eventHeight: 50} | |
]" | |
view-model.ref="scheduler" | |
k-data-source.bind="schedulerDataSource"> | |
</ak-scheduler> | |
<button click.delegate="scheduler.destroy()" ak-button>destroy</button> | |
<button click.delegate="scheduler.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Grid</h3> | |
<ak-grid k-data-source.bind="gridDataSource" view-model.ref="grid"> | |
<ak-col k-title="ProductName" k-field="ProductName"></ak-col> | |
</ak-grid> | |
<button click.delegate="grid.destroy()" ak-button>destroy</button> | |
<button click.delegate="grid.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>Grid (table)</h3> | |
<ak-grid view-model.ref="grid1"> | |
<table> | |
<thead> | |
<tr> | |
<th>A</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>Foo</td> | |
</tr> | |
</tbody> | |
</table> | |
</ak-grid> | |
<button click.delegate="grid1.destroy()" ak-button>destroy</button> | |
<button click.delegate="grid1.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>DateTimePicker</h3> | |
<input ak-datetimepicker ak-datetimepicker.ref="datetimepicker" style="width: 100%" /> | |
<button click.delegate="datetimepicker.destroy()" ak-button>destroy</button> | |
<button click.delegate="datetimepicker.recreate()" ak-button>recreate</button> | |
<hr> | |
<h3>DatePicker</h3> | |
<input ak-datepicker ak-datepicker.ref="datepicker" style="width: 100%" /> | |
<button click.delegate="datepicker.destroy()" ak-button>destroy</button> | |
<button click.delegate="datepicker.recreate()" ak-button>recreate</button> | |
</div> | |
</template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class BasicUsage { | |
gridDataSource = { | |
data: [{ProductName: 'Foo'}, {ProductName: 'Bar'}] | |
}; | |
menuDataSource = [ | |
{ | |
text: 'First Item', | |
items: [ | |
{ text: 'Sub Item 1' }, | |
{ text: '<strong>Sub Item 2</strong>', encoded: false }, | |
{ text: 'Sub Item 3' }, | |
{ text: 'Sub Item 4' } | |
] | |
}]; | |
mapCenter = [42.2814, -83.7483]; | |
mapLayers = [{ | |
type: 'tile', | |
urlTemplate: 'http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png', | |
subdomains: ['a', 'b', 'c'], | |
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap contributors</a>' | |
}]; | |
mapMarkers = [{ | |
location: [42.2814, -83.7483], | |
shape: 'pinTarget', | |
tooltip: { | |
content: 'Ann Arbor, MI' | |
} | |
}]; | |
diagramDataSource = new kendo.data.HierarchicalDataSource({ | |
data: [{ | |
firstName: 'Antonio', | |
lastName: 'Moreno', | |
image: 'antonio.jpg', | |
title: 'Team Lead', | |
colorScheme: '#1696d3', | |
items: [{ | |
firstName: 'Elizabeth', | |
image: 'elizabeth.jpg', | |
lastName: 'Brown', | |
title: 'Design Lead', | |
colorScheme: '#ef6944', | |
items: [{ | |
firstName: 'Ann', | |
lastName: 'Devon', | |
image: 'ann.jpg', | |
title: 'UI Designer', | |
colorScheme: '#ef6944' | |
}] | |
}, { | |
firstName: 'Diego', | |
lastName: 'Roel', | |
image: 'diego.jpg', | |
title: 'QA Engineer', | |
colorScheme: '#ee587b', | |
items: [{ | |
firstName: 'Fran', | |
lastName: 'Wilson', | |
image: 'fran.jpg', | |
title: 'QA Intern', | |
colorScheme: '#ee587b' | |
}] | |
}, { | |
firstName: 'Felipe', | |
lastName: 'Izquiedro', | |
image: 'felipe.jpg', | |
title: 'Senior Developer', | |
colorScheme: '#75be16', | |
items: [{ | |
firstName: 'Daniel', | |
lastName: 'Tonini', | |
image: 'daniel.jpg', | |
title: 'Developer', | |
colorScheme: '#75be16' | |
}] | |
}] | |
}], | |
schema: { | |
model: { | |
children: 'items' | |
} | |
} | |
}); | |
tasksDataSource = new kendo.data.GanttDataSource({ | |
transport: { | |
read: { | |
url: '//demos.telerik.com/kendo-ui/service/GanttTasks', | |
dataType: 'jsonp' | |
}, | |
update: { | |
url: '//demos.telerik.com/kendo-ui/service/GanttTasks/Update', | |
dataType: 'jsonp' | |
}, | |
destroy: { | |
url: '//demos.telerik.com/kendo-ui/service/GanttTasks/Destroy', | |
dataType: 'jsonp' | |
}, | |
create: { | |
url: '//demos.telerik.com/kendo-ui/service/GanttTasks/Create', | |
dataType: 'jsonp' | |
}, | |
parameterMap: function(options, operation) { | |
if (operation !== 'read') { | |
return { models: kendo.stringify(options.models || [options]) }; | |
} | |
} | |
}, | |
schema: { | |
model: { | |
id: 'id', | |
fields: { | |
id: { from: 'ID', type: 'number' }, | |
orderId: { from: 'OrderID', type: 'number', validation: { required: true } }, | |
parentId: { from: 'ParentID', type: 'number', defaultValue: null, validation: { required: true } }, | |
start: { from: 'Start', type: 'date' }, | |
end: { from: 'End', type: 'date' }, | |
title: { from: 'Title', defaultValue: '', type: 'string' }, | |
percentComplete: { from: 'PercentComplete', type: 'number' }, | |
summary: { from: 'Summary', type: 'boolean' }, | |
expanded: { from: 'Expanded', type: 'boolean', defaultValue: true } | |
} | |
} | |
} | |
}); | |
dependenciesDataSource = new kendo.data.GanttDependencyDataSource({ | |
transport: { | |
read: { | |
url: '//demos.telerik.com/kendo-ui/service/GanttDependencies', | |
dataType: 'jsonp' | |
}, | |
update: { | |
url: '//demos.telerik.com/kendo-ui/service/GanttDependencies/Update', | |
dataType: 'jsonp' | |
}, | |
destroy: { | |
url: '//demos.telerik.com/kendo-ui/service/GanttDependencies/Destroy', | |
dataType: 'jsonp' | |
}, | |
create: { | |
url: '//demos.telerik.com/kendo-ui/service/GanttDependencies/Create', | |
dataType: 'jsonp' | |
}, | |
parameterMap: function(options, operation) { | |
if (operation !== 'read') { | |
return { models: kendo.stringify(options.models || [options]) }; | |
} | |
} | |
}, | |
schema: { | |
model: { | |
id: 'id', | |
fields: { | |
id: { from: 'ID', type: 'number' }, | |
predecessorId: { from: 'PredecessorID', type: 'number' }, | |
successorId: { from: 'SuccessorID', type: 'number' }, | |
type: { from: 'Type', type: 'number' } | |
} | |
} | |
} | |
}); | |
treeviewDataSource = [ | |
{ text: 'Furniture', items: [ | |
{ text: 'Tables & Chairs' }, | |
{ text: 'Sofas' }, | |
{ text: 'Occasional Furniture' } | |
] }, | |
{ text: 'Decor', items: [ | |
{ text: 'Bed Linen' }, | |
{ text: 'Curtains & Blinds' }, | |
{ text: 'Carpets' } | |
] } | |
] | |
autocompleteItems = [ | |
'Charles', | |
'Jedd', | |
'Nikolaj', | |
'Jeroen', | |
'David', | |
'Rob', | |
'Matt', | |
'Patrick', | |
'Jason', | |
'Martin', | |
'Fredrick', | |
'Alex' | |
] | |
comboboxData = [ | |
{ text: 'Cotton', value: '1' }, | |
{ text: 'Polyester', value: '2' }, | |
{ text: 'Cotton/Polyester', value: '3' }, | |
{ text: 'Rib Knit', value: '4' } | |
]; | |
palette = [ | |
'#f0d0c9', '#e2a293', '#d4735e', '#65281a', | |
'#eddfda', '#dcc0b6', '#cba092', '#7b4b3a', | |
'#fcecd5', '#f9d9ab', '#f6c781', '#c87d0e', | |
'#e1dca5', '#d0c974', '#a29a36', '#514d1b', | |
'#c6d9f0', '#8db3e2', '#548dd4', '#17365d' | |
]; | |
pivotGridDataSource = new kendo.data.PivotDataSource({ | |
type: 'xmla', | |
columns: [{ name: '[Date].[Calendar]', expand: true }, { name: '[Product].[Category]' } ], | |
rows: [{ name: '[Geography].[City]' }], | |
measures: ['[Measures].[Reseller Freight Cost]'], | |
transport: { | |
connection: { | |
catalog: 'Adventure Works DW 2008R2', | |
cube: 'Adventure Works' | |
}, | |
read: '//demos.telerik.com/olap/msmdpump.dll' | |
}, | |
schema: { | |
type: 'xmla' | |
}, | |
error: (e) => { | |
alert('error: ' + kendo.stringify(e.errors[0])); | |
} | |
}); | |
treeListDataSource = new kendo.data.TreeListDataSource({ | |
data: [ | |
{ id: 1, Name: 'Daryl Sweeney', Position: 'CEO', Phone: '(555) 924-9726', parentId: null }, | |
{ id: 2, Name: 'Guy Wooten', Position: 'Chief Technical Officer', Phone: '(438) 738-4935', parentId: 1 }, | |
{ id: 32, Name: 'Buffy Weber', Position: 'VP, Engineering', Phone: '(699) 838-6121', parentId: 2 }, | |
{ id: 11, Name: 'Hyacinth Hood', Position: 'Team Lead', Phone: '(889) 345-2438', parentId: 32 }, | |
{ id: 60, Name: 'Akeem Carr', Position: 'Junior Software Developer', Phone: '(738) 136-2814', parentId: 11 }, | |
{ id: 78, Name: 'Rinah Simon', Position: 'Software Developer', Phone: '(285) 912-5271', parentId: 11 }, | |
{ id: 42, Name: 'Gage Daniels', Position: 'Software Architect', Phone: '(107) 290-6260', parentId: 32 }, | |
{ id: 43, Name: 'Constance Vazquez', Position: 'Director, Engineering', Phone: '(800) 301-1978', parentId: 32 }, | |
{ id: 46, Name: 'Darrel Solis', Position: 'Team Lead', Phone: '(327) 977-0216', parentId: 43 }, | |
{ id: 47, Name: 'Brian Yang', Position: 'Senior Software Developer', Phone: '(565) 146-5435', parentId: 46 }, | |
{ id: 50, Name: 'Lillian Bradshaw', Position: 'Software Developer', Phone: '(323) 509-3479', parentId: 46 }, | |
{ id: 51, Name: 'Christian Palmer', Position: 'Technical Lead', Phone: '(490) 421-8718', parentId: 46 }, | |
{ id: 55, Name: 'Summer Mosley', Position: 'QA Engineer', Phone: '(784) 962-2301', parentId: 46 }, | |
{ id: 56, Name: 'Barry Ayers', Position: 'Software Developer', Phone: '(452) 373-9227', parentId: 46 }, | |
{ id: 59, Name: 'Keiko Espinoza', Position: 'Junior QA Engineer', Phone: '(226) 600-5305', parentId: 46 }, | |
{ id: 61, Name: 'Candace Pickett', Position: 'Support Officer', Phone: '(120) 117-7475', parentId: 46 }, | |
{ id: 63, Name: 'Mia Caldwell', Position: 'Team Lead', Phone: '(848) 636-6470', parentId: 43 }, | |
{ id: 65, Name: 'Thomas Terry', Position: 'Senior Enterprise Support Officer', Phone: '(764) 831-4248', parentId: 63 }, | |
{ id: 67, Name: 'Ruth Downs', Position: 'Senior Software Developer', Phone: '(138) 991-1440', parentId: 63 }, | |
{ id: 70, Name: 'Yasir Wilder', Position: 'Senior QA Enginner', Phone: '(759) 701-8665', parentId: 63 }, | |
{ id: 71, Name: 'Flavia Short', Position: 'Support Officer', Phone: '(370) 133-9238', parentId: 63 }, | |
{ id: 74, Name: 'Aaron Roach', Position: 'Junior Software Developer', Phone: '(958) 717-9230', parentId: 63 }, | |
{ id: 75, Name: 'Eric Russell', Position: 'Software Developer', Phone: '(516) 575-8505', parentId: 63 }, | |
{ id: 76, Name: 'Cheyenne Olson', Position: 'Software Developer', Phone: '(241) 645-0257', parentId: 63 }, | |
{ id: 77, Name: 'Shaine Avila', Position: 'UI Designer', Phone: '(844) 435-1360', parentId: 63 }, | |
{ id: 81, Name: 'Chantale Long', Position: 'Senior QA Enginner', Phone: '(252) 419-6891', parentId: 63 }, | |
{ id: 83, Name: 'Dane Cruz', Position: 'Junior Software Developer', Phone: '(946) 701-6165', parentId: 63 }, | |
{ id: 84, Name: 'Regan Patterson', Position: 'Technical Writer', Phone: '(265) 946-1765', parentId: 63 }, | |
{ id: 85, Name: 'Drew Mckay', Position: 'Senior Software Developer', Phone: '(327) 293-0162', parentId: 63 }, | |
{ id: 88, Name: 'Bevis Miller', Position: 'Senior Software Developer', Phone: '(525) 557-0169', parentId: 63 }, | |
{ id: 89, Name: 'Bruce Mccarty', Position: 'Support Officer', Phone: '(936) 777-8730', parentId: 63 }, | |
{ id: 90, Name: 'Ocean Blair', Position: 'Team Lead', Phone: '(343) 586-6614', parentId: 43 }, | |
{ id: 91, Name: 'Guinevere Osborn', Position: 'Software Developer', Phone: '(424) 741-0006', parentId: 90 }, | |
{ id: 92, Name: 'Olga Strong', Position: 'Graphic Designer', Phone: '(949) 417-1168', parentId: 90 }, | |
{ id: 93, Name: 'Robert Orr', Position: 'Support Officer', Phone: '(977) 341-3721', parentId: 90 }, | |
{ id: 95, Name: 'Odette Sears', Position: 'Senior Software Developer', Phone: '(264) 818-6576', parentId: 90 }, | |
{ id: 45, Name: 'Zelda Medina', Position: 'QA Architect', Phone: '(563) 359-6023', parentId: 32 }, | |
{ id: 3, Name: 'Priscilla Frank', Position: 'Chief Product Officer', Phone: '(217) 280-5300', parentId: 1 }, | |
{ id: 4, Name: 'Ursula Holmes', Position: 'EVP, Product Strategy', Phone: '(370) 983-8796', parentId: 3 }, | |
{ id: 24, Name: 'Melvin Carrillo', Position: 'Director, Developer Relations', Phone: '(344) 496-9555', parentId: 3 }, | |
{ id: 29, Name: 'Martha Chavez', Position: 'Developer Advocate', Phone: '(140) 772-7509', parentId: 24 }, | |
{ id: 30, Name: 'Oren Fox', Position: 'Developer Advocate', Phone: '(714) 284-2408', parentId: 24 }, | |
{ id: 41, Name: 'Amos Barr', Position: 'Developer Advocate', Phone: '(996) 587-8405', parentId: 24 } | |
] | |
}) | |
listViewDataSource = new kendo.data.DataSource({ | |
transport: { | |
read: { | |
url: '//demos.telerik.com/kendo-ui/service/Products', | |
dataType: 'jsonp' | |
} | |
}, | |
pageSize: 21 | |
}) | |
schedulerDataSource = { | |
transport: { | |
read: { | |
url: '//demos.telerik.com/kendo-ui/service/tasks', | |
dataType: 'jsonp' | |
} | |
}, | |
schema: { | |
model: { | |
id: 'taskID', | |
fields: { | |
taskID: { from: 'TaskID', type: 'number' }, | |
title: { from: 'Title', defaultValue: 'No title', validation: { required: true } }, | |
start: { type: 'date', from: 'Start' }, | |
end: { type: 'date', from: 'End' }, | |
startTimezone: { from: 'StartTimezone' }, | |
endTimezone: { from: 'EndTimezone' }, | |
description: { from: 'Description' }, | |
recurrenceId: { from: 'RecurrenceID' }, | |
recurrenceRule: { from: 'RecurrenceRule' }, | |
recurrenceException: { from: 'RecurrenceException' }, | |
ownerId: { from: 'OwnerID', defaultValue: 1 }, | |
isAllDay: { type: 'boolean', from: 'IsAllDay' } | |
} | |
} | |
} | |
} | |
sheets = [{ | |
name: 'Food Order', | |
mergedCells: [ | |
'A1:G1', | |
'C15:E15' | |
], | |
rows: [ | |
{ | |
height: 70, | |
cells: [ | |
{ | |
index: 0, value: 'Invoice #52 - 06/23/2015', fontSize: 32, background: 'rgb(96,181,255)', | |
textAlign: 'center', color: 'white' | |
} | |
] | |
}, | |
{ | |
height: 25, | |
cells: [ | |
{ | |
value: 'ID', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Product', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Quantity', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Price', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Tax', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Amount', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(167,214,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
cells: [ | |
{ | |
value: 216321, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Calzone', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 1, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 12.39, format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C3*D3*0.2', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C3*D3+E3', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
cells: [ | |
{ | |
value: 546897, textAlign: 'center', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Margarita', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 2, textAlign: 'center', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 8.79, format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C4*D4*0.2', format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C4*D4+E4', format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
cells: [ | |
{ | |
value: 456231, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Pollo Formaggio', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 1, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 13.99, format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C5*D5*0.2', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C5*D5+E5', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
cells: [ | |
{ | |
value: 455873, textAlign: 'center', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Greek Salad', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 1, textAlign: 'center', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 9.49, format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C6*D6*0.2', format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C6*D6+E6', format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
cells: [ | |
{ | |
value: 456892, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Spinach and Blue Cheese', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 3, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 11.49, format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C7*D7*0.2', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C7*D7+E7', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
cells: [ | |
{ | |
value: 546564, textAlign: 'center', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Rigoletto', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 1, textAlign: 'center', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 10.99, format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C8*D8*0.2', format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C8*D8+E8', format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
cells: [ | |
{ | |
value: 789455, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Creme Brulee', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 5, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 6.99, format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C9*D9*0.2', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C9*D9+E9', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
cells: [ | |
{ | |
value: 123002, textAlign: 'center', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Radeberger Beer', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 4, textAlign: 'center', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 4.99, format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C10*D10*0.2', format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C10*D10+E10', format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
cells: [ | |
{ | |
value: 564896, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Budweiser Beer', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 3, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 4.49, format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C11*D11*0.2', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
formula: 'C11*D11+E11', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
index: 11, | |
cells: [ | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
index: 12, | |
cells: [ | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
height: 25, | |
index: 13, | |
cells: [ | |
{ | |
background: 'rgb(193,226,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(193,226,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(193,226,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
background: 'rgb(193,226,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
value: 'Tip:', background: 'rgb(193,226,255)', color: 'rgb(0,62,117)', textAlign: 'right', verticalAlign: 'bottom' | |
}, | |
{ | |
formula: 'SUM(F3:F11)*0.1', background: 'rgb(193,226,255)', color: 'rgb(0,62,117)', format: '$#,##0.00', bold: 'true', verticalAlign: 'bottom' | |
}, | |
{ | |
background: 'rgb(193,226,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
}, | |
{ | |
height: 50, | |
index: 14, | |
cells: [ | |
{ | |
index: 0, background: 'rgb(193,226,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
index: 1, background: 'rgb(193,226,255)', color: 'rgb(0,62,117)' | |
}, | |
{ | |
index: 2, fontSize: 20, value: 'Total Amount:', | |
background: 'rgb(193,226,255)', color: 'rgb(0,62,117)', textAlign: 'right' | |
}, | |
{ | |
index: 5, fontSize: 20, formula: 'SUM(F3:F14)', background: 'rgb(193,226,255)', color: 'rgb(0,62,117)', | |
format: '$#,##0.00', bold: 'true' | |
}, | |
{ | |
index: 6, background: 'rgb(193,226,255)', color: 'rgb(0,62,117)' | |
} | |
] | |
} | |
], | |
columns: [ | |
{ | |
width: 100 | |
}, | |
{ | |
width: 215 | |
}, | |
{ | |
width: 115 | |
}, | |
{ | |
width: 115 | |
}, | |
{ | |
width: 115 | |
}, | |
{ | |
width: 155 | |
} | |
] | |
}]; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Aurelia KendoUI bridge</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script> | |
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script> | |
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script> | |
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> | |
</head> | |
<body aurelia-app="main"> | |
<h1>Loading...</h1> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script> | |
<script> | |
System.import('aurelia-bootstrapper'); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function configure(aurelia) { | |
aurelia.use | |
.standardConfiguration() | |
.developmentLogging() | |
.plugin('aurelia-kendoui-bridge'); | |
aurelia.start().then(a => a.setRoot()); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment