pKrav75/app.html

## app.html
<template>
  <require from="aurelia-kendoui-bridge/grid/grid"></require>
  <require from="aurelia-kendoui-bridge/grid/col"></require>
  <require from="category"></require>
  <form style="width:100%">
        <label >plainGrid</label>
        <ak-grid id="grid2" k-data-source.bind="gridDs" k-navigatable.bind="true" k-reorderable.bind="true"
            k-pageable.bind="true" k-sortable.bind="true" k-resizable.bind="true" k-editable.bind="{confirmation : false}"
            k-toolbar.bind="[{name:'create', text : 'Ajouter ligne'}]">
            <ak-col k-title="Id" k-field="id"></ak-col>
            <ak-col k-field="dict" k-title="Dictionary" k-editor.bind="categoryDropDownEditor" k-template.bind="categoryTemplate"></ak-col>
        </ak-grid>
    </form>
</template>

## app.js
import { inject, bindable, LogManager } from 'aurelia-framework';
import { Container } from 'aurelia-dependency-injection';

let logger = LogManager.getLogger('testDictionaryInputGird');

export class tstScreenGrid {
    model = {}; // Contains data captured
    gridDs;

    constructor() {
        // Build Model for Grid
        this.gridDs = new kendo.data.DataSource({
            pageSize:5,
            data: '<list></list>',
            schema : {
                type: 'xml',
                data: '/list/item',
                model :{
                    id: 'id',
                   fields: {
                    id: { field: '@id', type: 'number' },
                    dict: { field: 'dict'}
                   }
                }
            }
        });
    }


categoryDropDownEditor = (container, options) => {
    let editor='<category combo-value.bind="'+ options.field +'" grid-col="'+ options.field + '"></category>';
    $(editor).appendTo(container);
}

categoryTemplate = (row) => {
    if(row['dict'])
    {
        return row['dict'];
    }
    else return '' };

}


## category.html
<template>
  <ak-combobox
    k-data-source.bind="data"
    k-data-text-field="CategoryName"
		k-data-value-field="CategoryID"
		k-on-change.delegate="onChange($event)"
		k-value.one-way="comboValue" // One Way, the other is done by change event
		k-widget.bind="combo"
		class="form-control">
    <ak-template>
			<span class="k-state-default">${CategoryName}</span>
		</ak-template>
  </ak-combobox>
</template>

## category.js
import {bindable, bindingMode, TaskQueue, inject} from 'aurelia-framework';

@inject(TaskQueue)
export class category{
   @bindable gridCol;
   @bindable comboValue;
   combo;
   TaskQueue;

   gridRow;

   constructor(TaskQueue){
     console.log('category ctor');
      this.TaskQueue = TaskQueue;
   }

   comboValueChanged(newValue, oldValue){
     this.TaskQueue.queueMicroTask(() =>this.internalComboValueChanged(newValue, oldValue));
   }

   internalComboValueChanged(newValue, oldValue){
     console.log('comboValueChanged ' + newValue + ' old ' + oldValue + ' ' + (this.combo ? 'combo is here' : 'noooo'));
     if(this.combo && newValue != oldValue){
        console.log('affect combo');
        this.combo.value(newValue);
        if(this.gridRow && this.gridCol){
          console.log("Updating col "+ this.gridCol + " with " + JSON.stringify(newValue));
          this.gridRow[this.gridCol]=newValue;
        }
     }
   }

   bind(gridRow){
     console.log('in bind');
     this.comboValueChanged(this.comboValue, undefined);
     if(gridRow){
       this.gridRow = gridRow;
     }
   }
   // ----> HERE <-----
   onChange(event){
     // This event is not triggered if combox box is selected by suggestion (type only 1 or 2 char and navigate with arrows)
     // on IE - Works on Chrome & FF
     let newValue = this.combo.value();
     console.log('On change category editor ' + JSON.stringify(event) + ' value is ' + JSON.stringify(newValue));
     this.comboValue = newValue;
   }

   data = [
      {CategoryID : 1, CategoryName : 'Category1'},
      {CategoryID : 2, CategoryName : 'Category2'}
      ];
}

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

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge',  kendo => kendo.pro());

  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="category"></require>
	<form style="width:100%">
	<label >plainGrid</label>
	<ak-grid id="grid2" k-data-source.bind="gridDs" k-navigatable.bind="true" k-reorderable.bind="true"
	k-pageable.bind="true" k-sortable.bind="true" k-resizable.bind="true" k-editable.bind="{confirmation : false}"
	k-toolbar.bind="[{name:'create', text : 'Ajouter ligne'}]">
	<ak-col k-title="Id" k-field="id"></ak-col>
	<ak-col k-field="dict" k-title="Dictionary" k-editor.bind="categoryDropDownEditor" k-template.bind="categoryTemplate"></ak-col>
	</ak-grid>
	</form>
	</template>
	import { inject, bindable, LogManager } from 'aurelia-framework';
	import { Container } from 'aurelia-dependency-injection';

	let logger = LogManager.getLogger('testDictionaryInputGird');

	export class tstScreenGrid {
	model = {}; // Contains data captured
	gridDs;

	constructor() {
	// Build Model for Grid
	this.gridDs = new kendo.data.DataSource({
	pageSize:5,
	data: '<list></list>',
	schema : {
	type: 'xml',
	data: '/list/item',
	model :{
	id: 'id',
	fields: {
	id: { field: '@id', type: 'number' },
	dict: { field: 'dict'}
	}
	}
	}
	});
	}


	categoryDropDownEditor = (container, options) => {
	let editor='<category combo-value.bind="'+ options.field +'" grid-col="'+ options.field + '"></category>';
	$(editor).appendTo(container);
	}

	categoryTemplate = (row) => {
	if(row['dict'])
	{
	return row['dict'];
	}
	else return '' };

	}
	<template>
	<ak-combobox
	k-data-source.bind="data"
	k-data-text-field="CategoryName"
	k-data-value-field="CategoryID"
	k-on-change.delegate="onChange($event)"
	k-value.one-way="comboValue" // One Way, the other is done by change event
	k-widget.bind="combo"
	class="form-control">
	<ak-template>
	<span class="k-state-default">${CategoryName}</span>
	</ak-template>
	</ak-combobox>
	</template>
	import {bindable, bindingMode, TaskQueue, inject} from 'aurelia-framework';

	@inject(TaskQueue)
	export class category{
	@bindable gridCol;
	@bindable comboValue;
	combo;
	TaskQueue;

	gridRow;

	constructor(TaskQueue){
	console.log('category ctor');
	this.TaskQueue = TaskQueue;
	}

	comboValueChanged(newValue, oldValue){
	this.TaskQueue.queueMicroTask(() =>this.internalComboValueChanged(newValue, oldValue));
	}

	internalComboValueChanged(newValue, oldValue){
	console.log('comboValueChanged ' + newValue + ' old ' + oldValue + ' ' + (this.combo ? 'combo is here' : 'noooo'));
	if(this.combo && newValue != oldValue){
	console.log('affect combo');
	this.combo.value(newValue);
	if(this.gridRow && this.gridCol){
	console.log("Updating col "+ this.gridCol + " with " + JSON.stringify(newValue));
	this.gridRow[this.gridCol]=newValue;
	}
	}
	}

	bind(gridRow){
	console.log('in bind');
	this.comboValueChanged(this.comboValue, undefined);
	if(gridRow){
	this.gridRow = gridRow;
	}
	}
	// ----> HERE <-----
	onChange(event){
	// This event is not triggered if combox box is selected by suggestion (type only 1 or 2 char and navigate with arrows)
	// on IE - Works on Chrome & FF
	let newValue = this.combo.value();
	console.log('On change category editor ' + JSON.stringify(event) + ' value is ' + JSON.stringify(newValue));
	this.comboValue = newValue;
	}

	data = [
	{CategoryID : 1, CategoryName : 'Category1'},
	{CategoryID : 2, CategoryName : 'Category2'}
	];
	}
	<!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', kendo => kendo.pro());

	aurelia.start().then(a => a.setRoot());
	}