gist-master

<template>
  <div id="example">
    <button click.delegate="alertBtn()" class="k-button">kendo.alert</button>
    <button click.delegate="confirmBtn()" class="k-button">kendo.confirm</button>
    <button click.delegate="promptBtn()" class="k-button">kendo.prompt</button>
  </div>
</template>

gist-master

<template>
  <require from="aurelia-kendoui-bridge/dialog/dialog"></require>
  <div id="example">
    <div id="dialog" 
         ak-dialog="k-widget.bind: dialog; 
                    k-width: 400px; 
                    k-title: Software Update; 
                    k-closable.bind: false; 
                    k-modal.bind: false; 
                    k-actions.bind: actions"

gist-master

 .wrapper {
     height: 320px;
     margin: 20px auto;
     padding: 20px 0 0;
     background: url('https://demos.telerik.com/kendo-ui/content/web/panelbar/astonmartin.png') no-repeat center 50px transparent;
 }
 
 #panelbar {
     width: 250px;
     float: right;

gist-master

 .wrapper {
     height: 320px;
     margin: 20px auto;
     padding: 20px 0 0;
     background: url('https://demos.telerik.com/kendo-ui/content/web/panelbar/astonmartin.png') no-repeat center 50px transparent;
 }
 
 #panelbar {
     width: 250px;
     float: right;

gist-master

<template>
  <require from="aurelia-kendoui-bridge/grid/grid"></require>
  <require from="aurelia-kendoui-bridge/grid/col"></require>
  <require from="aurelia-kendoui-bridge/grid/grid-command"></require>

  <ak-grid k-data-source.bind="datasource" k-on-data-bound.delegate="onDataBound($event.detail)">
    <ak-col k-title="OrderId" k-field="OrderID"></ak-col>
    <ak-col>
      <ak-grid-command k-name="details" k-text="Details" k-click.call="details($event)"></ak-grid-command>
    </ak-col>

gist-master

<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>

gist-master

<template>
  <h1>Kendo controls cannot be used from bind() or attached().</h1>
  <p>When you would like to use the control as soon as it has been initialized, we recommend using the k-on-ready event, shown below. Read <a href="https://aurelia-ui-toolkits.gitbooks.io/kendoui-bridge-docs/content/what_you_need_to_know.html#595-how-to-get-to-the-kendo-control">this chapter</a> for other solutions</p>
  
  <require from="aurelia-kendoui-bridge/datetimepicker/datetimepicker"></require>

  <div id="example">
    <div class="demo-section k-content">
      <p>Two ways to subscribe to the ready event. DOM events:</p>
      <input ak-datetimepicker k-on-ready.delegate="onReady($event.detail)" style="width: 100%" />

gist-master

<template>
  <require from="aurelia-kendoui-bridge/datetimepicker/datetimepicker"></require>
  <require from="aurelia-kendoui-bridge/button/button"></require>

  <div id="example">
    <div class="demo-section k-content" with.bind="appointment">
      <h4>Appointment starts on</h4>
      <input ak-datetimepicker="k-value.two-way: date" style="width: 100%" />
      
      <p>Change appointment object does not work due to <a href="https://github.com/aurelia-ui-toolkits/aurelia-kendoui-bridge/issues/671">#671</a></a></p>

gist-master

<template>
  <require from="aurelia-kendoui-bridge/grid/grid"></require>
  <require from="aurelia-kendoui-bridge/grid/col"></require>

  <ak-grid k-data-source.bind="datasource" k-pageable.bind="true" k-toolbar.bind="['create']" k-editable="inline" k-messages.bind="messages">
    <ak-col k-field="ProductName"></ak-col>
    <ak-col k-field="UnitPrice" k-title="Unit Price" k-format="{0:c}" k-width="120px"></ak-col>
    <ak-col k-field="UnitsInStock" k-title="Units In Stock" k-width="120px"></ak-col>
    <ak-col k-field="Discontinued" k-width="120px"></ak-col>
    <ak-col k-command.bind="['edit', 'destroy']" k-title="&nbsp;" width="250px"></ak-col>

gist-master

<template>
  <require from="aurelia-kendoui-bridge/grid/grid"></require>
  <require from="aurelia-kendoui-bridge/grid/col"></require>
  <require from="aurelia-kendoui-bridge/button/button"></require>
  
  <p>This sample demonstrates how to save the state of the grid to localStorage, and how to restore it again. Reorder the columns and click Save. Then reload the page and click on Load, the column order is then restored</p>
  
  <button click.delegate="save()" ak-button>Save</button>
  <button click.delegate="reloadPage()" ak-button>Reload page</button>
  <button click.delegate="load()" ak-button>Load</button>