New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid Aggregates

The aggregates help you to easily perform various mathematic operations on grouped column values. They are commonly displayed inside Group Templates.

To apply aggregates by specific fields:

  1. Create an array of AggregateDescriptor objects defining aggregates for the required fields.

    public myAggregates: AggregateDescriptor[] = [
        { field: 'UnitPrice', aggregate: 'sum' }
  2. Set the created aggregates array to the aggregates property of the GroupDescriptorfor the respective field.

    public group: GroupDescriptor[] = [
        { field: 'SupplierID', aggregates: this.myAggregates }

    By design, the aggregates are not persisted and need to be applied manually. Make sure to update the aggregates property of the GroupDescriptor in the groupChange or dataStateChange event handler.

    onGroupChange(group) {
        // set the desired aggregates to the incoming GroupDescriptor => (group.aggregates = this.aggregates));
    = group;
        this.gridData = groupBy(sampleProducts,;
  3. Use the aggregates field passed by each template to access and display the created aggregates from step 1.

    <kendo-grid [group]="group"...>
        <kendo-grid-column field="UnitPrice">
            <ng-template kendoGridGroupFooterTemplate  let-aggregates="aggregates">
                        Sum: {{aggregates.UnitPrice.sum}}

The following example demonstrates how to aggregate the data by the UnitPrice field:

View Source
Change Theme:

Aggregate Types

The supported aggregate types are:

  • sum
  • average
  • count
  • min
  • max

The following example demonstrates how to calculate several aggregates and display them in the footer template.

View Source
Change Theme:

In this article

Not finding the help you need?