New to Kendo UI for Angular? Start a free 30-day trial
Showing Aggregates in the Grid
Environment
| Product | Progress® Kendo UI® for Angular Grid |
Description
How can I show the aggregate value (sum, average, count, max, min) in the footer of the Kendo UI Grid without using the grouping feature?
Solution for Non-Pageable Grids
To show the total aggregates in the footer of the Grid, use the aggregateBy function. It returns an object of type AggregateResult which you can display in the Grid footer.
public gridData: GridDataResult = process(sampleProducts, this.state);
public aggregates: AggregateDescriptor[] = [{ field: "UnitPrice", aggregate: "sum" }];
public total: AggregateResult = aggregateBy(sampleProducts, this.aggregates);
<kendo-grid-column field="UnitPrice" title="Unit Price" [width]="200">
<ng-template kendoGridFooterTemplate>
Total sum: {{total["UnitPrice"].sum}}
</ng-template>
</kendo-grid-column>The following example demonstrates the full implementation of the suggested approach.
Example
View Source
Change Theme:
Solution for Pageable Grids
To show the aggregates for the current page, compute the total value on each DataStateChangeEvent.
public dataStateChange(state: DataStateChangeEvent): void {
this.state = state;
this.gridData = process(sampleProducts, this.state);
// Compute the aggregates for the data on the current Grid page.
this.total = aggregateBy(this.gridData.data, this.aggregates);
}The following example demonstrates the full implementation of the suggested approach.
Example
View Source
Change Theme:
