gist-master

<template>
  <require from="aurelia-kendoui-bridge/grid/grid"></require>
  <require from="aurelia-kendoui-bridge/grid/col"></require>
  <require from="aurelia-kendoui-bridge/common/template"></require>
  <require from="./my-custom-element"></require>

    <ak-grid k-data-source.bind="datasource">
      <ak-col k-title="First Name" k-field="FirstName"></ak-col>
      <ak-template for="detailTemplate">
         <customer-orders customer.bind="$this" orders.bind="Orders" firstname.bind="FirstName"></customer-orders>

gist-master

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

  <div class="demo-section k-content">
    <h4>Enter a date</h4>
    <input ak-date-input="k-format: MM/dd/yyyy" title="please enter date" style="width: 100%" />
  </div>
</template>

gist-master

<template>
  <require from="aurelia-kendoui-bridge/listbox/listbox"></require>
  <require from="aurelia-kendoui-bridge/common/template"></require>
  <require from="./style.css!css"></require>

  <div id="example">
    <div class="demo-section k-content wide">
      <ak-list-box k-data-text-field="ContactName"
                  k-data-value-field="CustomerID"
                  k-data-source.bind="datasource"

gist-master

<template>
  <require from="aurelia-kendoui-bridge/listbox/listbox"></require>
  <require from="./styles.css!css"></require>

  <div id="example" role="application">
    <div class="demo-section k-content wide">
      <ak-list-box k-data-text-field="ContactName"
                  k-data-value-field="CustomerID"
                  k-data-source.bind="datasource"
                  k-draggable.bind="draggable"

gist-master

<template>
  <require from="aurelia-kendoui-bridge/listbox/listbox"></require>
  <require from="./style.css!css"></require>

  <div class="demo-section k-content">
    <div>
      <label for="optional" id="employees">Employees</label>
      <label for="selected">Developers</label>
      <br />
      

gist-master

<template>
  <require from="aurelia-kendoui-bridge/listbox/listbox"></require>
  <require from="./style.css!css"></require>

  <div class="demo-section k-content">
    <div>
      <label for="optional" id="employees">Employees</label>
      <label for="selected">Developers</label>
      <br />
      <ak-list-box k-connect-with="selected" k-toolbar.bind="toolbar">

gist-master

<template>
  <require from="aurelia-kendoui-bridge/mediaplayer/mediaplayer"></require>
  
  <div class="demo-section k-content wide" style="max-width: 900px;">
            
    <div id="mediaPlayer" style="height:360px"
            ak-mediaplayer="k-media.bind: { title: 'Recap of Progress', source: 'http://telerik-media.s3.amazonaws.com/digital-factory/digital-factory-720.mp4'};
            k-auto-play.bind: true;
            k-navigatable.bind: true;        
            k-widget.bind:mediaPlayer"></div>

gist-master

.customer-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: 32px 35px;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);

gist-master

<template>
  <require from="aurelia-kendoui-bridge/mediaplayer/mediaplayer"></require>
  <require from="./logger"></require>

  <div id="example">
    <div class="demo-section k-content">
      <div id="mediaPlayer" style="height:360px" ak-mediaplayer="k-media.bind: { title: 'Recap of Progress', source: 'https://www.youtube.com/watch?v=tc3xhD24iTU' };
                        k-auto-play.bind: true;
                        k-navigatable.bind: true;
                        k-widget.bind: mediaPlayer"

gist-master

<template>
  <require from="aurelia-kendoui-bridge/mediaplayer/mediaplayer"></require>
  <require from="aurelia-kendoui-bridge/listview/listview"></require>
  <require from="aurelia-kendoui-bridge/common/template"></require>

  <div id="mediaPlayer" style="height:360px" ak-mediaplayer="k-autoPlay.bind: true; k-widget.bind: mediaPlayer">
  </div>
  <div class="k-list-container playlist">
    <ul id="listView" class="k-list"></ul>
    <ak-list-view k-data-source.bind="videos"