JSFiddle - React, Tailwind, and code Playground

by rydama

HTML

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

JavaScript

$(document).ready(function () {

    $("#grid").kendoGrid({
        groupable: true,

        columns: [{
            field: "dept"
        }, {
            field: "a",
            aggregates: ["sum"],
            groupFooterTemplate: "<div>#= kendo.toString(data.sum, 'n') # </div>"
        }, {
            field: "b",
            aggregates: ["sum"],
            groupFooterTemplate: "<div>#= kendo.toString(data.sum, 'n') # </div>"
        }, {
            field: "c",
            aggregates: ["sum"],
            groupFooterTemplate: "<div>#= kendo.toString(data.sum, 'n') # </div>"
        }, {
            field: "e",
            aggregates: ["sum"],
            groupFooterTemplate: "<div>#= kendo.toString(data.sum, 'n') # </div>"
        }],
        aggregates: [{
            field: "dept",
            aggregate: "sum"
        }],
        templateSettings: {
            useWithBlock: false
        },
        dataSource: {
            group: [{
                field: "dept",
                aggregates: [{
                    field: "dept",
                    aggregate: "sum"
                }]
            }],
            
            aggregate:[{field:"dept", aggregate:"sum"}],

            data: [{
                dept: "10",
                a: 25.2,
                b: 27.1,
                c: 30.2,
                e: 31.3
            }, {
                dept: "10",
                a: 25.2,
                b: 27.1,
                c: 30.2,
                e: 31.3
            }, {
                dept: "20",
                a: 25.2,
                b: 27.1,
                c: 30.2,
                e: 31.3
            }, {
                dept: "20",
                a: 25.2,
                b: 27.1,
                c: 30.2,
                e: 31.3
            }]
        }
    });
});