<template>
  <require from="aurelia-kendoui-bridge/grid/grid"></require>
  <require from="aurelia-kendoui-bridge/grid/col"></require>
  <require from="category"></require>
  <div id="example">
    <ak-grid k-pageable.bind="true" k-height.bind="500" k-toolbar.bind="['create']" k-editable.bind="true" k-data-source.bind="dataSource" k-on-ready.delegate="onReady($event.detail)">
      <ak-col k-field="ProductName" k-title="Product Name"></ak-col>
      <ak-col k-field="Category" k-title="Category" k-width="230px" k-editor.bind="categoryDropDownEditor" k-template.bind="categoryTemplate"></ak-col>
      <ak-col k-field="UnitPrice" k-title="Unit Price" k-format="{0:c}" k-width="130px"></ak-col>
      <ak-col k-command="destroy" k-title=" " k-width="150px"></ak-col>
    </ak-grid>
    <hr>
    <label>Category custom element alone</label><category combo-value.two-way="aValue"></category>
    <input type="text" value.bind="aValue">
  </div>
</template>