Kendo Grid Aggregates
Kendo Grid Aggregates behaves weirly when virtualization is activated
HTML
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/column-virtualization">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.2.802/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.802/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
</div>
</body>
</html>
JavaScript
$(function() {
let columns = [];
let data = [];
let numberOfColumns = 15;
let numberOfRows = 35;
let row, field, groupable, groupableTemplate, props;
for (let i = 1; i <= numberOfColumns; i++) {
field = ("Field" + i);
groupable = false;
groupableTemplate = null;
props = { field: field, title: field, width: 200 };
if(i == 6) {
groupableTemplate = `Total : #: data['${field}'] ? data['${field}'].count : 0 #`;
groupable = true;
}
if(i == 8) {
groupableTemplate = `Sum : #: data['${field}'] ? data['${field}'].sum : 0 #`;
groupable = true;
}
props.groupFooterTemplate = groupableTemplate;
props.groupable = groupable;
columns.push(props);
}
// --- --- ---
let val;
for (let i = 1; i <= numberOfRows; i++) {
row = {};
for (let j = 1; j <= numberOfColumns; j++) {
field = ("Field" + j);
val = null;
if(j == 6)
val = 1;
else if (j == 8)
val = 2;
else
val = "R" + i + ":C" + j;
row[field] = val;
}
data.push(row);
}
var dataSource = new kendo.data.DataSource({
pageSize: 10,
data: data,
group: [
{ field: "Field6", aggregates: [ { field: "Field6", aggregate: "count" }, { field: "Field8", aggregate: "sum" } ] },
...