johntom

<template>
  <require from="valueConverters"></require>
  <div class="row">
    <v-grid
      class="col-md-6"
      style="height:350px"
      v-row-height="25"
      v-current-entity.bind=myCurrentEntity
      v-collection.bind="myCollection| selected:'isSelected':showOnlySelected"
      v-grid-context.bind=myGrid>

johntom

<template>
  <require from="valueConverters"></require>
  <require from="v-grid-control-form.html"></require>
  <div class="row">

    <v-grid
      class="col-md-6"
      style="height:350px"
      v-row-height="25"
      v-header-height="50"

johntom

<template>
  <require from="valueConverters"></require>
  <div class="row">
  <div class="col s6">
                <button type="submit" click.delegate="exportContacts()" class="btn btn-sm  btn-block btn-success"> Export to Excel</button>
            </div>
     </div>
  <div class="row">

    <v-grid

johntom

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

johntom

<template>
  <div id="example">
    Addtions
    <br/>
    <li>Prevent Group on object(Category) k-filterable.bind="false"      k-groupable.bind="false" </li>
    <li>Prevent search and filter on object</li>
    <li>Prevent fields from edit (see nonEditor.. making ony unit editable)</li>
    <li>Limit length of display edit (see nonEditorLength ProductName-Limit) for edit also</li>
    <li>Hide Delete button based on condition current admin= ${user.admin} change  value to toggle</li>
    Issues

johntom

<template>
  <require from="aurelia-kendoui-bridge/grid/grid"></require>
  <require from="aurelia-kendoui-bridge/grid/col"></require>
  <require from="aurelia-kendoui-bridge/button/button"></require>
  
  <p>This sample demonstrates how to save the state of the grid to localStorage, and how to restore it again. Reorder the columns and click Save. Then reload the page and click on Load, the column order is then restored</p>
  
 
  <!--<ak-grid k-data-source.bind="datasource" k-reorderable.bind="true" k-widget.bind="grid">-->
  <!--  <ak-col k-title="ProductName" k-field="ProductName"></ak-col>-->

johntom

.customer-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: 32px 35px;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);

johntom

<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="aurelia-kendoui-bridge/button/button"></require>

  <ak-grid k-data-source.bind="datasource">
    <ak-col k-title="Contact Name" k-field="ContactName"></ak-col>
    <ak-col k-title="Contact Name">
      <ak-template>

johntom

<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>
      <!--<button type="button"  class="k-button k-primary" ak-button k-on-click.delegate="clearSelection()">Clear</button>-->

     <ak-grid k-data-source.bind="datasource" id="grid" k-widget.bind="grid"
      k-on-data-bound.delegate="onDataBound($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"

johntom

<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>
   
     <ak-grid k-data-source.bind="datasource" id="grid" k-widget.bind="grid"
      k-on-data-bound.delegate="onDataBound($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-on-change.delegate="rowSelected($event.detail)" k-column-menu.bind="true"