Grid: detail template

app.html

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

    <ak-grid k-data-source.bind="datasource"
             k-pageable.bind="pageable"
             k-sortable.bind="true"
             k-on-data-bound.delegate="onDataBound($event.detail)"
             k-on-detail-init.delegate="detailInit($event.detail)">
      <ak-col k-title="First Name" k-field="FirstName"></ak-col>
      <ak-col k-title="Last Name" k-field="LastName"></ak-col>
      <ak-col k-width="120px" k-field="City"></ak-col>
      <ak-col k-field="Title"></ak-col> 
      <ak-template for="detailTemplate">
        <div class="tabstrip">
            <ul>
                <li class="k-state-active">
                   Orders
                </li>
                <li>
                    Contact Information
                </li>
            </ul>
            <div>
                <div class="orders"></div>
            </div>
            <div>
                <div class='employee-details'>
                    <ul>
                        <li><label>Country:</label>${Country | some}</li>
                        <li><label>City:</label>${City}</li>
                        <li><label>Address:</label>${Address}</li>
                        <li><label>Home Phone:</label>${HomePhone}</li>
                    </ul>
                </div>
            </div>
        </div>
      </ak-template>
    </ak-grid>

    <style>
        .k-detail-cell .k-tabstrip .k-content {
            padding: 0.2em;
        }
        .employee-details ul
        {
            list-style:none;
            font-style:italic;
            margin: 15px;
            padding: 0;
        }
        .employee-details ul li
        {
            margin: 0;
            line-height: 1.7em;
        }

        .employee-details label
        {
            display:inline-block;
            width:90px;
            padding-right: 10px;
            text-align: right;
            font-style:normal;
            font-weight:bold;
        }
    </style>
</template>

app.js

import {inject, Container} from 'aurelia-dependency-injection';
import {TemplatingEngine, ViewResources} from 'aurelia-templating';

@inject(Container, ViewResources)
export class BasicUse {

  pageable = {
    refresh: true,
    pageSizes: true,
    buttonCount: 10
  };
  
  constructor(container, viewResources) {
    this._container = container;
    
    // as an alternative to <require from="./somevalueconverter"></require> you can register
    // a value converter that's in this app.js file
    viewResources.registerValueConverter('some', new SomeValueConverter());
    
    this.datasource = {
      type: 'odata',
      transport: {
        read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees'
      },
      pageSize: 20,
      serverPaging: true,
      serverSorting: true
    };
  }

  detailInit(e) {
    let detailRow = e.detailRow;

    detailRow.find('.tabstrip').kendoTabStrip({
      animation: {
        open: { effects: 'fadeIn' }
      }
    });

  console.log(this._container.get(ViewResources))
    detailRow.find('.orders').kendoGrid({
      // the TemplateCompiler of the aurelia-kendoui-bridge needs a couple of things for it to be able to compile Aurelia templates
      // one thing is the parent context (this is an aurelia-binding thing)
      // the other thing is the dependency injection container
      // we have to put this in the $angular: [] array, since this is treated by Kendo in a special way
      $angular: [{
          _$parent: this,
          _$container: this._container
      }],
      dataSource: {
        type: 'odata',
        transport: {
          read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        pageSize: 7,
        filter: { field: 'EmployeeID', operator: 'eq', value: e.data.EmployeeID }
      },
      scrollable: false,
      sortable: true,
      pageable: true,
      columns: [
        // the function call wrapper () => disables Kendo's templating system, so we can use whatever syntax we like without Kendo trying to parse it (and breaking)
        { field: 'OrderID', title: 'ID', width: '70px', template: () => '<div><span>hello ${OrderID | some}</span></div>' },
        { field: 'ShipCountry', title: 'Ship Country', width: '110px' },
        { field: 'ShipAddress', title: 'Ship Address' },
        { field: 'ShipName', title: 'Ship Name', width: '300px' }
      ]
    });
  }

  onDataBound(e) {
    let grid = e.sender;
    grid.expandRow(grid.tbody.find('tr.k-master-row').first());
  }
}

export class SomeValueConverter {
  toView(text) {
    if (text) {
      return ' VALUE CONVERTED: '  + text;
    }
  }
} 

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