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>
  <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"></ak-col>
      <ak-col k-field="Category" k-title="Category" k-width="230px" k-editor.bind="categoryDropDownEditor" k-template.bind="categoryTemplate"></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.two-way="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 ;
  aValue = 1;
  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'
        }
      }
    });
  }
  
  setProp() {
    console.log("test")
  }
  
  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.two-way="CategoryID"></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.detail)"
		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} from 'aurelia-framework';

export class category{
   @bindable comboValue;
   combo;
   
   bind(dataItem) {
     this.dataItem = dataItem;
   }
   
   onChange(e) {
     this.dataItem.set("CategoryID", this.comboValue);
     this.dataItem.set("Category", this.data.find(x => x.CategoryID === this.comboValue));
   }
  
   data = [
      {CategoryID : 1, CategoryName : 'Category1'},
      {CategoryID : 2, CategoryName : 'Category2'}
      ];
}

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