JSFiddle - React, Tailwind, and code Playground
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",
groupFooterTemplate: "<div>#= kendo.toString(data.a.sum, 'n') # </div>"
}, {
field: "b",
groupFooterTemplate: "<div>#= kendo.toString(data.b.sum, 'n') # </div>"
}, {
field: "c",
groupFooterTemplate: "<div>#= kendo.toString(data.c.sum, 'n') # </div>"
}, {
field: "e",
groupFooterTemplate: "<div>#= kendo.toString(data.e.sum, 'n') # </div>"
}],
templateSettings: {
useWithBlock: false
},
dataSource: {
group: [{
field: "dept",
aggregates: [
{ field: "dept", aggregate: "sum" },
{ field: "a", aggregate: "sum" },
{ field: "b", aggregate: "sum" },
{ field: "c", aggregate: "sum" },
{ field: "e", 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
}]
}
});
});