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.

To apply aggregates by specific fields:

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

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

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

   Copy Codepublic 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.

   Copy CodeonGroupChange(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);
   }

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

   Copy Code<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.

Suggested Links

• Group Templates
• Overview of Data Query
• API Reference of the GridComponent
• API Index of the Grid