<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>
  <require from="./my-custom-element"></require>

    <ak-grid k-data-source.bind="datasource">
      <ak-col k-title="First Name" k-field="FirstName"></ak-col>
      <ak-template for="detailTemplate">
         <customer-orders customer.bind="$this" orders.bind="Orders" firstname.bind="FirstName"></customer-orders>
      </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>