gist-master · November 11, 2016 20:42
diff --git a/app.html b/app.html
 <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="aurelia-kendoui-bridge/common/notify-binding-behavior"></require>

  <!-- note, you need to call .notifyBindingBehavior() in main.js -->
  <ak-grid k-data-source.bind="datasource" k-widget.bind="grid" k-toolbar.bind="['create']" k-editable.bind="true">
    <ak-col k-field="ProductName"></ak-col>
    <ak-col>
      <ak-template>
        <!-- when ProductName changes, tell Kendo that -->
        <input type="text" value.bind="ProductName & notify"/>
      </ak-template>
    </ak-col>
    <ak-col k-field="Category"></ak-col>
    <ak-col>
      <ak-template>
        <select value.bind="Category & notify">
          <option value="Food">Food</option>
          <option value="Tech">Tech</option>
        </select>
      </ak-template>
    </ak-col>
  </ak-grid>

  <div repeat.for="item of data">
    <p>${item.ProductName}
      <!-- you can provide the object and property name explicitly -->
      <!-- in this case, the object isn't picked up because it is in a repeat.for loop -->
      <input type="text" value.bind="item.ProductName & notify:item:ProductName"/>
    </p>
  </div>

  <button ak-button click.delegate="addNew()">add new</button>
  <button ak-button click.delegate="updateItem()">change last item</button>
  <button ak-button click.delegate="removeItem()">remove last item</button>
  <button ak-button click.delegate="save()">save()</button>
 </template>
diff --git a/app.js b/app.js
 export class TwoWayBinding {
  constructor() {
    // Kendo will see that this is an ObservableArray
    // and it will not clone the array, but use this array directly
    // allowing you to push/pop to this array directly
    this.data = new kendo.data.ObservableArray([
      {ProductName: 'foo', Category: 'Food', ProductID: 1},
      {ProductName: 'bar', Category: 'Food', ProductID: 2}
    ]);
    
    this.datasource = new kendo.data.DataSource({
      transport: {
        read: (options) => {
          options.success(this.data);
        },
        update: (options) => {
          console.log('There were changes detected'); // eslint-disable-line no-console
          options.success();
        },
        create: (options) => {
          // assign ID as otherwise Kendo things it hasn't been created yet
          options.data.models.forEach(i => i.ProductID = Math.floor((Math.random() * 99999999) + 1));
          options.success();
        },
        destroy: (options) => {
          options.success();
        }
      },
      schema: {
        model: {
          id: 'ProductID'
        }
      }
    });
  }

  save() {
    this.grid.saveChanges();
  }

  addNew() {
    this.data.push({ProductName: 'hello'});
  }

  updateItem() {
    // use .set() to change variables, otherwise it isn't picked up by Kendo
    let lastItem = this.data[this.data.length - 1];
    lastItem.set('ProductName', 'abcd');
  }

  removeItem() {
    this.data.pop();
  }

  updateProp(item, property) {
    // raise the change event so that the grid knows that a property has changed and will make the grid reflect the change
    item.trigger('change', { field: property });
    item.dirty = true;
  }
 }
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/grid/grid"></require>
	<require from="aurelia-kendoui-bridge/grid/col"></require>
	<require from="aurelia-kendoui-bridge/common/template"></require>
	<require from="aurelia-kendoui-bridge/common/notify-binding-behavior"></require>

	<!-- note, you need to call .notifyBindingBehavior() in main.js -->
	<ak-grid k-data-source.bind="datasource" k-widget.bind="grid" k-toolbar.bind="['create']" k-editable.bind="true">
	<ak-col k-field="ProductName"></ak-col>
	<ak-col>
	<ak-template>
	<!-- when ProductName changes, tell Kendo that -->
	<input type="text" value.bind="ProductName & notify"/>
	</ak-template>
	</ak-col>
	<ak-col k-field="Category"></ak-col>
	<ak-col>
	<ak-template>
	<select value.bind="Category & notify">
	<option value="Food">Food</option>
	<option value="Tech">Tech</option>
	</select>
	</ak-template>
	</ak-col>
	</ak-grid>

	<div repeat.for="item of data">
	<p>${item.ProductName}
	<!-- you can provide the object and property name explicitly -->
	<!-- in this case, the object isn't picked up because it is in a repeat.for loop -->
	<input type="text" value.bind="item.ProductName & notify:item:ProductName"/>
	</p>
	</div>

	<button ak-button click.delegate="addNew()">add new</button>
	<button ak-button click.delegate="updateItem()">change last item</button>
	<button ak-button click.delegate="removeItem()">remove last item</button>
	<button ak-button click.delegate="save()">save()</button>
	</template>
	export class TwoWayBinding {
	constructor() {
	// Kendo will see that this is an ObservableArray
	// and it will not clone the array, but use this array directly
	// allowing you to push/pop to this array directly
	this.data = new kendo.data.ObservableArray([
	{ProductName: 'foo', Category: 'Food', ProductID: 1},
	{ProductName: 'bar', Category: 'Food', ProductID: 2}
	]);

	this.datasource = new kendo.data.DataSource({
	transport: {
	read: (options) => {
	options.success(this.data);
	},
	update: (options) => {
	console.log('There were changes detected'); // eslint-disable-line no-console
	options.success();
	},
	create: (options) => {
	// assign ID as otherwise Kendo things it hasn't been created yet
	options.data.models.forEach(i => i.ProductID = Math.floor((Math.random() * 99999999) + 1));
	options.success();
	},
	destroy: (options) => {
	options.success();
	}
	},
	schema: {
	model: {
	id: 'ProductID'
	}
	}
	});
	}

	save() {
	this.grid.saveChanges();
	}

	addNew() {
	this.data.push({ProductName: 'hello'});
	}

	updateItem() {
	// use .set() to change variables, otherwise it isn't picked up by Kendo
	let lastItem = this.data[this.data.length - 1];
	lastItem.set('ProductName', 'abcd');
	}

	removeItem() {
	this.data.pop();
	}

	updateProp(item, property) {
	// raise the change event so that the grid knows that a property has changed and will make the grid reflect the change
	item.trigger('change', { field: property });
	item.dirty = true;
	}
	}
	<!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());
	}