<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-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">
         <ak-grid k-data-source.bind="datasource"
                 k-pageable.bind="pageable"
                 k-sortable.bind="true"
                 k-on-detail-init.delegate="detailInit($event.detail)">
          <ak-col k-title="First Name" k-field="FirstName"></ak-col>


          <ak-template for="detailTemplate">
           <ak-grid k-data-source.bind="datasource"
                 k-pageable.bind="pageable"
                 k-sortable.bind="true">
            <ak-col k-title="First Name" k-field="FirstName"></ak-col>
           </ak-grid>
          </ak-template>
        </ak-grid>
      </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>