Skip to content

Instantly share code, notes, and snippets.

@gist-master
Last active January 7, 2017 08:51
Show Gist options
  • Save gist-master/38ead64ee92d684da566078b1a0f65c2 to your computer and use it in GitHub Desktop.
Save gist-master/38ead64ee92d684da566078b1a0f65c2 to your computer and use it in GitHub Desktop.
recreate
<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">&nbsp;</span>
<div class="weather">
<h2>17<span>&ordm;C</span></h2>
<p>Rainy weather in Paris.</p>
</div>
</div>
<div>
<span class="sunny">&nbsp;</span>
<div class="weather">
<h2>29<span>&ordm;C</span></h2>
<p>Sunny weather in New York.</p>
</div>
</div>
<div>
<span class="sunny">&nbsp;</span>
<div class="weather">
<h2>21<span>&ordm;C</span></h2>
<p>Sunny weather in London.</p>
</div>
</div>
<div>
<span class="cloudy">&nbsp;</span>
<div class="weather">
<h2>16<span>&ordm;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">
&lt;p&gt;&lt;img src=&quot;http://demos.telerik.com/kendo-ui/content/web/editor/kendo-ui-web.png&quot; alt=&quot;Editor for ASP.NET MVC logo&quot; style=&quot;display:block;margin-left:auto;margin-right:auto;&quot; /&gt;&lt;/p&gt;
&lt;p&gt;
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
accessibility standards and provides API for content manipulation.
&lt;/p&gt;
&lt;p&gt;Features include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Text formatting &amp; alignment&lt;/li&gt;
&lt;li&gt;Bulleted and numbered lists&lt;/li&gt;
&lt;li&gt;Hyperlink and image dialogs&lt;/li&gt;
&lt;li&gt;Cross-browser support&lt;/li&gt;
&lt;li&gt;Identical HTML output across browsers&lt;/li&gt;
&lt;li&gt;Gracefully degrades to a &lt;code&gt;textarea&lt;/code&gt; when JavaScript is turned off&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;
Read &lt;a href=&quot;http://docs.telerik.com/kendo-ui&quot;&gt;more details&lt;/a&gt; or send us your
&lt;a href=&quot;http://www.telerik.com/forums/&quot;&gt;feedback&lt;/a&gt;!
&lt;/p&gt;
</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>
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: '&copy; <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
}
]
}];
}
<!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>
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