Grid: frozen columns

app.html

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

<h1>Forked frozed columns</h1>
<h2>3-31-17 added k-on-edit.delegate</h2>

<h2>Multi Select with ctrl+leftbutton</h2>

  <button ak-button click.delegate="showSelection()">Show selection</button>${selectedids}
    <!--k-on-change.delegate="rowSelected($event.detail)"-->
 <ak-grid k-data-source.bind="datasource" id="grid" k-widget.bind="grid"
   k-on-data-bound.delegate="onDataBound($event.detail)"
   k-on-edit.delegate="onEdit($event.detail)"
   k-sortable.bind="{ mode: 'multiple',   allowUnsort: 'true'}"
   k-filterable.bind="{  mode: 'row' }" k-editable="inline" k-reorderable.bind="true"
   k-groupable.bind="true"
 
   k-resizable.bind="true" k-column-menu.bind="true"

  k-on-change.delegate="details($event)"


   k-selectable="[row,multiple]"
   k-pageable.bind="pageable">
   
     <!--{ template: "<input type='checkbox' class='checkbox' />" },-->
     <!--k-click.delegate='details($event)'-->
     <!--k-on-change.delegate="details($event)"-->
     <!--k-on-click.delegate='details($event)' k-field="CB" -->
     
     <!-- <ak-col k-title="CB"  k-locked.bind="true" k-lockable.bind="false" k-width.bind="59"-->
   
     <!--k-click.call='details($event)'-->
     <!--k-template="<input type='checkbox' class='checkbox' onclick='details($event)'  />">-->
     <!--</ak-col>-->
     
     <ak-col k-title="CB"  k-locked.bind="true" k-lockable.bind="false" k-width.bind="59"
   
     k-template="<input type='checkbox' class='checkbox'   />">
     </ak-col>
    <!--<ak-col k-title="checkbox" id="checkbox" k-editor.bind="editorCheckbox()"  k-width.bind="59"></ak-col>-->
     
    <!--<ak-col>  -->
    <!--<ak-grid-command k-name="cb2" k-text="cb2" k-click.call="details($event)"></ak-grid-command>-->
    <!--  </ak-col>-->
     
  <ak-col k-field="OrderID" k-title="Order ID" k-locked.bind="true" k-lockable.bind="false" k-width.bind="150"></ak-col>
       <ak-col k-title="Web Link1" k-width="160px"
     k-template="<a class='my-link' href='http://aurelia.io' target='_blank'>http://aurelia.io</a>">
     </ak-col>
    <ak-col k-width="180px" k-title="command" k-command.bind="['edit']" 
      k-click.call="onEdit($event)" k-title="&nbsp;" k-locked.bind="true" k-lockable.bind="false"></ak-col>

    
         <ak-col  k-title="Details"  k-width.bind="150" k-template="<button click.delegate='details($event)' class='k-button'>#=OrderID#</button>">
     </ak-col>
            <ak-col k-field="OrderID" k-lockable.bind="false" ></ak-col>
  </ak-col>
  <ak-col k-field="ShipCountry" k-title="Ship Country" k-width.bind="300"></ak-col>
  <ak-col k-field="ShipCity" k-title="Ship City" k-width.bind="300"></ak-col>
  <ak-col k-field="ShipName" k-title="Ship Name" k-locked.bind="true" k-width.bind="300"></ak-col>
  <ak-col k-field="ShipAddress" k-lockable.bind="false" k-width.bind="400"></ak-col>
</ak-grid>
</template>

app.js

export class FrozenColumns {
    
  constructor() {
    this.selectedids=[];
    var checkedIds = {};
    this.datasource = {
      type: 'odata',
      transport: {
        read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'
      },
      schema: {
        model: {
          fields: {
             CB: { type: 'boolean' },
            OrderID: { type: 'number' },
            ShipCountry: { type: 'string' },
            ShipName: { type: 'string' },
            ShipCity: { type: 'string' },
            ShipAddress: { type: 'string' }
          }
        }
      },
      pageSize: 10
    };
     //bind click event to the checkbox
    // this.grid.table.on("click", ".checkbox" , selectRow);

    
  }
   onDataBound(e) {
      // alert('on onDataBound '+e)
        let grid = e.sender;
        kendo.jQuery('a[href*=\'#\']', grid.tbody).removeAttr('href');
        this.grid.table.on("click", ".checkbox" , selectRow);
    }

  details(e) {
  //  alert(e)
        let grid = this.grid;
        var targetRow = $(e.target).closest("tr");
        
        grid.select(targetRow);
        // redirect if required
  }

  onEdit(e) {
        let grid = e.sender;
        var targetRow = $(e.container);
        grid.select(targetRow);
        
  }


// editorCheckbox(container,options) {
//         // if (options.model.completed) {
//         //     let fn = options.field
//         //     container.text(options.model[fn])
//         // }
//         // else {
//         alert('e')
//             $('<input type="checkbox" />')
//                 .appendTo(container)

//         //}

//     }


   //on click of the checkbox:
    // selectRow() {
    //     var checked = this.checked,
    //     row = $(this).closest("tr"),
    //     grid = $("#grid").data("kendoGrid"),
    //     dataItem = grid.dataItem(row);

    //     checkedIds[dataItem.id] = checked;
    //     if (checked) {
    //         //-select the row
    //         row.addClass("k-state-selected");
    //         } else {
    //         //-remove selection
    //         row.removeClass("k-state-selected");
    //     }
    // }

    // //on dataBound event restore previous selected rows:
    // onDataBound(e) {
    //     var view = this.dataSource.view();
    //     for(var i = 0; i < view.length;i++){
    //         if(checkedIds[view[i].id]){
    //             this.tbody.find("tr[data-uid='" + view[i].uid + "']")
    //             .addClass("k-state-selected")
    //             .find(".checkbox")
    //             .attr("checked","checked");
    //         }
    //     }
    // }
  
 // working ros select from project
  // rowSelected(e) {
  //       console.log('e ' + e.sender)
  //       let grid = e.sender;
  //       let selectedRow = grid.select();
  //       let dataItem = grid.dataItem(selectedRow);
  //       //   alert(dataItem.assignto);
  //   }
// telerik
// var grid = $("#rowSelection").data("kendoGrid");
//               var selectedRows = grid.select();
//               selectedRows = selectedRows.splice(0, selectedRows.length/2);
//               selectedRows.forEach(function(el){
//                 var dataItem = grid.dataItem(el);
//                 console.log(dataItem.ShipCountry);
//               })
showSelection() {
  var sels = [];
  var grid=this.grid;
  var selectedRows = grid.select();
  var maxRows = selectedRows.length / 2;
  // if I use line below VM6204 app.js!transpiled:115 Uncaught TypeError: selectedRows.each is not a function
  selectedRows = selectedRows.splice(0, selectedRows.length / 2);
  console.log(' selectedRows ' ,selectedRows)
  selectedRows.forEach(function ( el) {
    let dataItem = grid.dataItem(el);
   console.log('forEach',dataItem.ShipCountry);
   //   sels.push(dataItem.OrderID );
 });
   var i; var a1;
   for (i = 0; i < maxRows; i++) { 
     a1 = selectedRows[i];
     let dataItem = grid.dataItem(a1);
     console.log(dataItem.ShipCountry);
   
      sels.push(dataItem.OrderID );
 }
   
    this.selectedids=sels;
}

}



  
  

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 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');

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