gist-master · January 7, 2017 08:51
diff --git a/app.html b/app.html
 <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>
diff --git a/app.js b/app.js
 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
      }
    ]
  }];
 }
diff --git a/index.html b/index.html
 <!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>
diff --git a/main.js b/main.js
 export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge');

  aurelia.start().then(a => a.setRoot());
 }
	<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>
	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: 'C3D30.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: 'C4D40.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: 'C5D50.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: 'C6D60.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: 'C7D70.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: 'C8D80.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: 'C9D90.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: 'C10D100.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: 'C11D110.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());
	}