Grid: popup editing

app.html

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

  <ak-grid k-widget.bind="kendoGrid1" k-data-source.bind="datasource1"  >
  </ak-grid>
  
  <br/>
  
   <ak-grid k-widget.bind="kendoGrid2" k-data-source.bind="datasource2" k-pageable.bind="true" k-editable="popup" k-toolbar.bind="['create']">
    <ak-col k-title="ProductName" k-width="120px">
      <ak-template>
       <select value.bind="ProductName & notify"><option value="Chai">Chaix</option><option value="Chai2">Chaixx</option></select>
      </ak-template>
    </ak-col>
    <ak-col k-field="UnitPrice" k-title="Unit Price" k-format="{0:c}" k-width="120px"></ak-col>
    <ak-col k-field="UnitsInStock" k-title="Units In Stock" k-width="120px"></ak-col>
    <ak-col k-field="Discontinued" k-width="120px"></ak-col>
    <ak-col k-command.bind="['edit', 'destroy']" k-title="&nbsp;" k-width="250px"></ak-col>
  </ak-grid>
</template>

app.js

export class PupupEditing {
  
  data1 = [
    {
      id : 1, ProductName : 'Chai2', UnitPrice : 18, Discontinued : true, UnitsInStock : 1
    }
  ];
  
    data2 = [
    {
      ProductID : 1, ProductName : 'Chai2', UnitPrice : 18, Discontinued : true, UnitsInStock : 1
    }
  ];
  
  columns = [
    { field : 'ProductName', template :  kendo.template('<select value.bind="ProductName & notify"><option value="Chai1">Chaix</option><option value="Chai2">Chaixx</option></select>')},
    { field : 'UnitPrice', type: 'number', validation: { required: true, min: 1} },
    { field : 'Discontinued', type: 'boolean'  },
    { command: ['edit', 'destroy'], title: " "}
  ];

  
  constructor() {
    
   this.datasource1 = new kendo.data.DataSource({
      pageSize: 5,
      schema: {
        model: {
          id: 'id'
        }
      }
    });
    
    
        this.datasource2 = new kendo.data.DataSource({
      data : this.data2,
      batch: true,
      pageSize: 8,
      schema: {
        model: {
          id: 'ProductID',
          fields: {
            ProductID: { editable: false, nullable: true },
            ProductName: { validation: { required: true } },
            UnitPrice: { type: 'number', validation: { required: true, min: 1} },
            Discontinued: { type: 'boolean' },
            UnitsInStock: { type: 'number', validation: { min: 0, required: true } }
          }
        }
      }
    });
    
    let _this = this;
    
setTimeout(function(){ 
  
  let options = _this.kendoGrid1.getOptions();
  
        options.editable = {
            mode: "popup",
            window: {
                width: '800px'
            },
           // template: kendo.template('<div class="k-edit-label"><label for="ProductName">ProductName</label></div><div class="k-edit-field"><select value.bind="ProductName &amp; notify" class="au-target" au-target-id="39"><option value="Chai">Chaix</option><option value="Chai2">Chaixx</option></select></div>')
          };
          
                      options.toolbar = ['create'];

        options.scrollable = true;
        options.reorderable = true;
        options.sortable = true;
        options.resizable = true;
        options.filterable = true;
        options.pageable = true;
        options.columnMenu = true;
        
        _this.mapColumns(options);
  
  _this.kendoGrid1.setOptions(options);
  _this.kendoGrid1.dataSource.data(_this.data1)
  
}, 1000);

    
    
  }
  
      mapColumns(options) {


            options.columns.push({ command: ['edit', 'destroy'], title: " ", width: 185 });

        this.columns.forEach(column => {

            let kendoColumn =
                {
                    field: column.field, title: column.title, type: column.type, validation: column.validation, nullable: column.nullable
                };

            if (column.width != undefined)
                kendoColumn.width = column.width;

            if (column.template != undefined)
                kendoColumn.template = column.template

            options.columns.push(kendoColumn);
        });
    }
  
  
}

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

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