Selection Aggregates
The Grid allows you calculate aggregated metrics based on the data of the selected cells or rows.
This functionality allows you to get a quick snapshot containing metrics about 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 the valuetrue. -
IsFalse—The total number of boolean fields with the valuefalse.
Enabling Selection Aggregates
To display selection aggregates, the Grid must meet the following requirements:
- The Grid must be
Selectablewhere theCellAgregatesproperty is specified. The aggregates work withCell,Row, andCheckboxselection. - The
Model.Idfield must be defined so that the aggregates can be calculated.
To enable the display of aggregates, use either of the following approaches:
-
Configure the aggregates inside the
.Selectableconfiguration of the Grid by using theCellAggregatesproperty. In this way, the Grid will display all available selection aggregates..Selectable(selectable => selectable .Mode(GridSelectionMode.Multiple) .CellAggregates(true) .CheckboxSelection(true) ) -
Pass an array to the
CellAggregatesproperty. This will allow you to display selection aggregates only for the aggregates that you specify in the array..Selectable(selectable => selectable .Mode(GridSelectionMode.Multiple) .CellAggregates(new string[]{"sum","count","earliest","isTrue"}) )
Displaying Selection Aggregates in Status Bar
The Grid allows you to render the selection aggregates in a built-in bar under the table cells—the 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 a div element that is placed in the Grid's Status Bar.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("rowSelection")
.Columns(columns =>
{
columns.Bound(o => o.ShipCountry).Width(200);
columns.Bound(p => p.Freight).Width(200);
columns.Bound(p => p.OrderDate).Format("{0:dd/MM/yyyy}");
})
.Pageable(pageable => pageable.ButtonCount(5))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.CellAggregates(true)
)
.PersistSelection(true)
.StatusBarTemplate(Html.Kendo().Template()
.AddHtml("${data.aggregates.count>0?`<div>Cells count: ${data.aggregates['count']} Min: ${data.aggregates['min']} Max: ${data.aggregates['max']} Sum: ${data.aggregates['sum']} Average: ${formatAggregate(data.aggregates['average'], 'average')} Earliest Date: ${formatAggregate(data.aggregates['earliest'], 'earliest')} Latest Date: ${formatAggregate(data.aggregates['latest'], 'latest')}</div>`:'No rows are selected'}")
)
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(model => model.Id(p => p.OrderID))
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
<script>
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.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("cellSelection")
.Columns(columns =>
{
columns.Bound(o => o.ShipCountry).Width(200);
columns.Bound(p => p.Freight).Width(200);
columns.Bound(p => p.OrderDate).Format("{0:dd/MM/yyyy}");
})
.ToolBar(toolbar => toolbar.Custom()
.ClientTemplate(Html.Kendo().Template()
.AddComponent(component=>component.Button()
.Name("display-aggregates")
.Content("Dislay Aggregates")
.Enable(false)
.Events(e=>e.Click("onDisplayAggregatesBttn"))
)
)
)
.Pageable(pageable => pageable.ButtonCount(5))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Cell)
.CellAggregates(true)
)
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(m => m.Id(f => f.OrderID))
.Read(read => read.Action("Orders_Read", "Grid"))
)
.Events(e => e.Change("onChange"))
)
@(Html.Kendo().Dialog()
.Name("dialog")
.Title("Selection Aggregates")
.Visible(false)
.Width(450)
.Modal(false)
.Actions(actions =>
{
actions.Add().Text("Close").Primary(true);
})
)
let aggregates;
function onChange(e) {
let displayAggregatesBttn = $("#display-aggregates").data("kendoButton");
displayAggregatesBttn.enable(true);
aggregates = e.cellAggregates;
}
function onDisplayAggregatesBttn(e) {
let dialogContent = aggregatesTemplate(aggregates);
let dialog = $("#dialog").data("kendoDialog");
dialog.content(dialogContent);
dialog.open();
}
function aggregatesTemplate(aggregates) {
var result = '<div class="k-d-flex k-gap-sm">';
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;
}