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 with the values of grouped column. Aggregates are commonly displayed inside Group Templates.

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

Change Theme

Theme

Loading ...

To apply aggregates by specific fields:

Create an array of AggregateDescriptor objects that define aggregates for the required fields.

public myAggregates: AggregateDescriptor[] = [
    { field: 'UnitPrice', aggregate: 'sum' }
];

Set the created aggregates array to the aggregates property of the GroupDescriptor for the respective field.

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

By design, the aggregates are not persisted, and you must apply them 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.map((group) => (group.aggregates = this.aggregates));

    this.group = group;
    this.gridData = groupBy(sampleProducts, this.group);
}

Use the aggregates field passed by each template to access and display the created aggregates from step 1.

html

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

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.

Change Theme

Theme

Loading ...

Angular Data Grid Aggregates

Aggregate Types

Suggested Links