JSFiddle - React, Tailwind, and code Playground

by rusev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

$("#grid").kendoGrid({
     dataSource: {
         type: "odata",
         serverPaging: false,
         serverSorting: false,
         pageSize: 1000,
         transport: {
             read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
         },
         group: {
             field: "ShipCity", aggregates: [
                     { field: "OrderID", aggregate: "count" },
                     { field: "CustomerID", aggregate: "count" },
                     { field: "ShipName", aggregate: "count" },
                     { field: "ShipCity", aggregate: "count" }
                  ]
         },

        aggregate: [{ field: "OrderID", aggregate: "count" },
                      { field: "CustomerID", aggregate: "count" },
                      { field: "ShipName", aggregate: "count" },
         ]
     },
     height: 280,
     scrollable: {
         virtual: false
     },
     sortable: true,
     groupable: true,
     columns: [
        { field: "OrderID", aggregates: "count", groupHeaderTemplate: "OrderID: #= value # (Count: #= count#)" },
         { field: "CustomerID", aggregates: "count", groupHeaderTemplate: "CustomerID: #= value # (Count: #= count#)", footerTemplate: "Total Count: #=count#" },
         { field: "ShipName", title: "Ship Name", aggregates: "count", groupHeaderTemplate: "ShipName: #= value # (Count: #= count#)" },
         { field: "ShipCity", title: "Ship City", aggregates: "count", groupHeaderTemplate: "ShipCity: #= value # (Count: #= count#)" }
     ],
     databound: function () {
         //$("#grid").find(".k-icon.k-collapse").trigger("click");
     }
 });