JSFiddle - React, Tailwind, and code Playground

by keithnolan

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

$(document).ready(function() {
            var dataVal = getData();

            var colList = new Array();

            var col1 = {field:"ProductLine", title:"ProductLine" };
            var col2 = {field:"Tier", title:"Tier", aggregates: ["count"]    ,  groupFooterTemplate: "Count: #=count#" };
            colList.push(col1);
            colList.push(col2);


            $("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    pageSize: 100,
                    serverPaging: true,
                    serverSorting: true,
                    serverGrouping: true,
                     serverAggregates: true,
                    data: dataVal,
                    schema: { data: "ViewData", total: "Count", groups: "groups", aggregates: "aggregates"},
                    group: {
                         field: "Tier", aggregates: [{ field: "Tier", aggregate: "count" }]
                    }
                },
                height: 780,
                scrollable: true,
                sortable: false,
                pageable: true,
                columns: colList
            });


    })



        function getData()
        {
                        var dataVal = {
               "Count":10,
               "ViewData":[],
               "groups":[
                  {
                     "aggregates":[
                        {
                           "Tier":{
                              "count":5
                           }
                        }
                     ],
                     "field":"Tier",
                     "value":"Tier 1",
                     "items":[
                        {
                           "ProductLine":"CART for Commuters",                           
                           "Tier":"Tier 1"
                        },
                        {
                           "ProductLine":"CART for Commuters",
                           "Tier":"Tier 1"
             ...