Grid: editing custom editor

app.html

<template>
  <require from="aurelia-kendoui-bridge/grid/grid"></require>
  <require from="aurelia-kendoui-bridge/grid/col"></require>
  <require from="category"></require>
  <require from="customAttribute"></require>
  <div id="example">
    <ak-grid k-pageable.bind="true" k-height.bind="500" k-toolbar.bind="['create']" k-editable.bind="true" k-data-source.bind="dataSource">
      <ak-col k-field="ProductName" k-title="Product Name" book="field : col1; precision : 4"></ak-col>
      <ak-col k-field="Category" k-title="Category" k-width="230px" k-editor.bind="categoryDropDownEditor" k-template.bind="categoryTemplate" book="field : col3; age : 5"></ak-col>
      <ak-col k-field="UnitPrice" k-title="Unit Price" k-format="{0:c}" k-width="130px"></ak-col>
      <ak-col k-command="destroy" k-title=" " k-width="150px"></ak-col>
    </ak-grid>
    <hr>
    <label>Category custom element alone</label><category combo-value.bind="aValue"></category>
    <input type="text" value.bind="aValue">
  </div>
</template>

app.js

import {inject} from 'aurelia-framework';
import { TemplatingEngine } from 'aurelia-templating';
import products from './editing-custom-editor.json!';

@inject(TemplatingEngine)
export class EditingCustomEditor {
  categoryTemplate = '${Category.CategoryName}';
  datasource ;
  te;
  
  constructor(templatingEngine){
    this.te = templatingEngine;
    this.dataSource = new kendo.data.DataSource({
      pageSize: 20,
      data: products.products,
      autoSync: true,
      schema: {
        model: {
          id: 'ProductID',
          fields: {
            ProductID: { editable: false, nullable: true },
            ProductName: { validation: { required: true } },
            Category: { defaultValue: { CategoryID: 1, CategoryName: 'Beverages'} },
            UnitPrice: { type: 'number', validation: { required: true, min: 1} }
          }
        }
      }
    });
    
  }

  categoryDropDownEditorPrevious(container, options) {
    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
      autoBind: false,
      dataSource: {
        type: 'odata',
        transport: {
          read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories'
        }
      }
    });
  }
  
  categoryDropDownEditor(container, options) {
    console.log('categoryDropDownEditor->' + options.model.CategoryID);
    // How to link combo-value of the component to the existing options.model ?
    // $('<category data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"></category>').appendTo(container);
    $('<category combo-value.bind=CategoryID grid-col="'+ options.field + '"></category>').appendTo(container);
  }
}

category.html

<template>
  <span><small>?</small></span>
  <ak-combobox
    k-data-source.bind="data"
    k-data-text-field="CategoryName" 
		k-data-value-field="CategoryID"
		k-value.two-way="comboValue"
		k-on-change.delegate="onChange($event)"
		k-widget.bind="combo"
		class="form-control">
    <ak-template>
				<span class="k-state-default">${CategoryName} - ${CategoryID}</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;
   
   gridRow;
   
   constructor(TaskQueue){
      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;
     }
   }
   
   onChange(event){
     console.log('OnChange ' + JSON.stringify(this.comboValue));
   }
   
   data = [
      {CategoryID : 1, CategoryName : 'Category1'},
      {CategoryID : 2, CategoryName : 'Category2'}
      ];
}

customAttribute.js

import {customAttribute, inject, bindable, LogManager, dynamicOptions} from 'aurelia-framework';

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

@customAttribute('book')
@inject(Element)
@dynamicOptions
export class myCustomClass {
  
  constructor(e){
    this.element = e;
  }
  
  propertyChanged(name, newValue, oldValue) {
    console.log('Property ' + name +  ' ' + newValue);
    
  }
}

editing-custom-editor.json

{
   "products": [
      {
         "ProductID": 1,
         "ProductName": "Chai",
         "SupplierID": 1,
         "CategoryID": 1,
         "QuantityPerUnit": "10 boxes x 20 bags",
         "UnitPrice": 18,
         "UnitsInStock": 39,
         "UnitsOnOrder": 0,
         "ReorderLevel": 10,
         "Discontinued": false,
         "Category": {
            "CategoryID": 1,
            "CategoryName": "Category1",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
         }
      },
      {
         "ProductID": 2,
         "ProductName": "Chang",
         "SupplierID": 1,
         "CategoryID": 1,
         "QuantityPerUnit": "24 - 12 oz bottles",
         "UnitPrice": 19,
         "UnitsInStock": 17,
         "UnitsOnOrder": 40,
         "ReorderLevel": 25,
         "Discontinued": false,
         "Category": {
            "CategoryID": 1,
            "CategoryName": "Category1",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
         }
      },
      {
         "ProductID": 3,
         "ProductName": "Aniseed Syrup",
         "SupplierID": 1,
         "CategoryID": 2,
         "QuantityPerUnit": "12 - 550 ml bottles",
         "UnitPrice": 10,
         "UnitsInStock": 13,
         "UnitsOnOrder": 70,
         "ReorderLevel": 25,
         "Discontinued": false,
         "Category": {
            "CategoryID": 2,
            "CategoryName": "Category2",
            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
         }
      },
      {
         "ProductID": 4,
         "ProductName": "Chef Anton's Cajun Seasoning",
         "SupplierID": 2,
         "CategoryID": 2,
         "QuantityPerUnit": "48 - 6 oz jars",
         "UnitPrice": 22,
         "UnitsInStock": 53,
         "UnitsOnOrder": 0,
         "ReorderLevel": 0,
         "Discontinued": false,
         "Category": {
            "CategoryID": 2,
            "CategoryName": "Category2",
            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
         }
      },
      {
         "ProductID": 5,
         "ProductName": "Chef Anton's Gumbo Mix",
         "SupplierID": 2,
         "CategoryID": 2,
         "QuantityPerUnit": "36 boxes",
         "UnitPrice": 21.35,
         "UnitsInStock": 0,
         "UnitsOnOrder": 0,
         "ReorderLevel": 0,
         "Discontinued": true,
         "Category": {
            "CategoryID": 2,
            "CategoryName": "Category2",
            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
         }
      }
   ]
}

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());
}