Selection Aggregates
The Grid enables you to select single or multiple cells or rows and calculate different metrics based on the selected data.
This functionality allows you to get a quick snapshot of some of the more important aggregates of the selected data. You can use the built-in approach and display these metrics at the bottom of the Grid or create your own elements that will display the data.
The Grid supports the following built-in aggregates for all selected cells:
-
max—The greatest number. Valid for numeric fields. -
min—The smallest number. Valid for numeric fields. -
sum—The sum of all numbers. Valid for numeric fields. -
average—The average of all numbers. Valid for numeric fields. -
count—The total number of cells. -
earliest—The earliest date. Valid forDatefields. -
latest—The latest date. Valid forDatefields. -
isTrue—The total number of boolean fields with true value. -
isFalse—The total number of boolean fields with false value.
Requirements
- The Grid must be
selectablewhere the [cellAgregates] property is specified. The aggregates work withcell,row, andcheckboxselection. - The
schema.model.idfield must be defined when theselectableis set tocell.
The aggregates are configured inside the selectable configuration of the Grid through the cellAggregates property.
selectable: {
mode: "multiple row",
cellAggregates: true
}
You can also pass an array to the cellAggregates property in case you want to calculate only some of the aggregates.
selectable: {
mode: "multiple row",
cellAggregates: ["sum", "count", "earliest", "isTrue"]
}
Displaying Selection Aggregates in Status Bar
The Grid allow you to render the selection aggregates in a built-in bar under the table cells - Status Bar.
To show the selection aggregates in the Status Bar, define a template by using statusBarTemplate, and return the desired HTML result.
The following example demonstrates how to access the calculated cell aggregates and display them in an external div element.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="status-bar-aggregates"></div>
<script type="module">
$(document).ready(function() {
$("#status-bar-aggregatese").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 15
},
height: 550,
persistSelection: true,
selectable: {
mode: "multiple cell",
cellAggregates: true
},
statusBarTemplate: ({ aggregates }) => {
var result = "";
for (const aggregate in aggregates) {
const value = aggregates[aggregate];
if (value || value === 0) {
result += `<div class="k-selection-aggregates-item"><span class="k-selection-aggregates-item-text">${aggregate}: </span><span class="k-selection-aggregates-item-value">${formatAggregate(aggregates[aggregate], aggregate)}</span></div>`;
}
}
return result;
},
scrollable: true,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitsInStock", title: "Units In Stock", format: "{0:MM/dd/yyyy}", width: "150px" },
{ field: "Discontinued", title: "Discontinued", attributes: { class: "k-text-center !k-justify-content-center" }, width: "130px" },
{ field: "UnitPrice", title: "Unit Price", width: "150px" }
]
});
});
function formatAggregate(aggregate, key) {
if (key === "average" || key === "sum" || key === "max" || key === "min") {
return kendo.toString(aggregate, "n");
}
if (key === "earliest" || key === "latest") {
return kendo.toString(aggregate, "dd/MM/yyyy");
}
return aggregate;
}
</script>
Displaying Selection Aggregates Externally
To display the aggregates within a custom element or component, handle the Grid change event and access the precalculated aggregates from the exposed event data.
The following example demonstrates how to access the calculated cell aggregates and display them in an external div element.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="external-el"></div>
<br />
<div id="external-aggregates"></div>
<script type="module">
$(document).ready(function() {
let aggregates;
$("#external-aggregates").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 10
},
height: 400,
persistSelection: true,
selectable: {
mode: "multiple cell",
cellAggregates: true
},
scrollable: true,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitsInStock", title: "Units In Stock", format: "{0:MM/dd/yyyy}", width: "150px" },
{ field: "Discontinued", title: "Discontinued", attributes: { class: "k-text-center !k-justify-content-center" }, width: "130px" },
{ field: "UnitPrice", title: "Unit Price", width: "150px" }
],
change: function(e) {
aggregates = e.cellAggregates; // Access the calculated cell aggregates
$("#external-el").html(aggregatesTemplate(aggregates));
}
});
});
function aggregatesTemplate(aggregates) {
var result = '<div class="k-d-flex k-gap-sm">External Aggregates: ';
for (const aggregate in aggregates) {
const value = aggregates[aggregate];
if (value || value === 0) {
result += `<div class="k-selection-aggregates-item"><span class="k-selection-aggregates-item-text">${aggregate}: </span><span class="k-selection-aggregates-item-value">${formatAggregate(aggregates[aggregate], aggregate)}</span></div>`;
}
}
result += '</div>';
return result;
}
function formatAggregate(aggregate, key) {
if (key === "average" || key === "sum" || key === "max" || key === "min") {
return kendo.toString(aggregate, "n");
}
if (key === "earliest" || key === "latest") {
return kendo.toString(aggregate, "dd/MM/yyyy");
}
return aggregate;
}
</script>