Grid: basic usage

app.html

<template>
   <!--k-excel.bind="{ fileName: 'Kendo UI Grid Export.xlsx' , allPages: true }"-->
   <!--    k-toolbar.bind="['excel','pdf']",  margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" }, landscape: true,repeatHeaders: true,template: $("#page-template").html(),  scale: 0.8,allPages: true }''-->
             <!--k-on-excel-export.delegate="excelExport($event.detail)"-->
      <ak-grid id="grid" k-data-source.bind="datasource" k-pageable.bind="{ refresh: true, pageSizes: true, buttonCount: 10 }"
                k-sortable.bind="true" k-reorderable.bind="true" k-groupable.bind="true" k-resizable.bind="true" k-filterable.bind="true"
                k-column-menu.bind="true" k-toolbar.bind="['excel']" 
               >

  
  
  
       <ak-col k-title="Product Name" k-field="ProductName" >
                <ak-template for="groupFooterTemplate">
                    Group Count: ${ProductName.count}
                </ak-template>
                <ak-template for="footerTemplate">
                    Total Count: ${count}
                </ak-template>

            </ak-col>
            <ak-col k-title="Unit Price" k-field="UnitPrice"></ak-col>
        
           <ak-col k-title="SupplierID" k-field="SupplierID"></ak-col>
          <ak-col k-title="CategoryID" k-field="CategoryID"></ak-col>




            
            <ak-col k-title="Units On Order" k-field="UnitsOnOrder">
                <ak-template for="footerTemplate">
                   Average: ${average}
                </ak-template>
                <ak-template for="groupFooterTemplate">
                    Average: ${UnitsOnOrder.average}
                </ak-template>

            </ak-col>

            <ak-col k-title="Units In Stock" k-field="UnitsInStock">
                <ak-template for="groupHeaderTemplate">
                    In Stock: ${aggregates.UnitsInStock.count}
                </ak-template>
            </ak-col>
        </ak-grid>
</template>

app.js

  // <d:ProductID m:type="Edm.Int32">1</d:ProductID>
  //       <d:ProductName>Chai</d:ProductName>
  //       <d:SupplierID m:type="Edm.Int32">1</d:SupplierID>
  //       <d:CategoryID m:type="Edm.Int32">1</d:CategoryID>
  //       <d:QuantityPerUnit>10 boxes x 20 bags</d:QuantityPerUnit>
  //       <d:UnitPrice m:type="Edm.Decimal">18.00</d:UnitPrice>
  //       <d:UnitsInStock m:type="Edm.Int16">39</d:UnitsInStock>
  //       <d:UnitsOnOrder m:type="Edm.Int16">0</d:UnitsOnOrder>
  //       <d:ReorderLevel m:type="Edm.Int16">10</d:ReorderLevel>
  //       <d:Discontinued m:type="Edm.Boolean">false</d:Discontinued>
export class Grid {
    pageable = {
        refresh: true,
        pageSizes: true,
        buttonCount: 10
    };
    datasource = {
        type: 'odata',
        transport: {
            read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Products'
        },
        schema: {
            model: {
                fields: {
                    ProductName: { type: "string" },
                    UnitPrice: { type: "number" },
                    UnitsOnOrder: { type: "number" },
                    UnitsInStock: { type: "number" },
                    SupplierID: { type: "number" },
                     CategoryID: { type: "number" },
                }
            }
        },
        pageSize: 10,
        group: {
            field: "UnitsInStock",
            aggregates: [
                { field: "ProductName", aggregate: "count" },
                { field: "UnitPrice", aggregate: "sum" },
                { field: "UnitsOnOrder", aggregate: "average" },
                { field: "UnitsInStock", aggregate: "count" }
            ]
        },

        aggregate: [
            { field: "ProductName", aggregate: "count" },
            { field: "UnitPrice", aggregate: "sum" },
            { field: "UnitsOnOrder", aggregate: "average" },
            { field: "UnitsInStock", aggregate: "min" },
            { field: "UnitsInStock", aggregate: "max" }
        ]
    };
  excelExport(e) {
    var rows = e.workbook.sheets[0].rows;
    let total;
    let gtot = 0;
    let totalct = 0;
    let gtotct = 0;
    for (var ri = 0; ri < rows.length; ri++) {
      var row = rows[ri];
      if (row.type == 'group-header' || row.type == 'header') {
        total = 0;
        totalct=0;
      }
      if (row.type == 'data' && row.cells[ri, 2] != undefined) {
        if (row.cells[ri, 2] !== NaN)
          total = (total + row.cells[ri, 2].value * 1);
          totalct++
      }
      if (row.type == 'group-footer' || row.type == 'footer') {
        for (var ci = 0; ci < row.cells.length; ci++) {
          var cell = row.cells[ci];
          if (cell.value != undefined)
            if (cell.value !== NaN && ci === 1) {
             
              gtotct += totalct
              cell.value = 'count '+totalct+ ' ('+gtotct+')'
            }
          if (cell.value !== NaN && ci === 2) {
             gtot += total
        
           cell.value = 'total '+   numeral(total).format('($0,0.00)')+ ' ('+ numeral(gtot).format('($0,0.00)')+')'// numeral(value).format('($0,0.00)')
          }
          if ( ci === 3) {
            cell.value = 'rct '+ gtotct
          }
            if ( ci === 4) {
            cell.value = 'rtotal '+ gtot
          }
        }
      }
    }
    rows[ri, 2].value = 'gtot:' + gtot
    rows[ri + 1, 2].value = 'gtot:' + gtot
  }

};

basic-use.css

.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);
    margin-left: 5px;
}

.customer-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    padding-left: 3px;
}

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.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.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/0.3.5/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', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}