HelpBot Assistant

How can I help you?

Custom Aggregate in Angular Grid Component

7 Mar 20267 minutes to read

The Syncfusion® Angular Grid supports custom aggregate functions for scenarios where built-in options do not meet specific requirements. This allows for tailored logic to compute aggregate values.

To configure a custom aggregate, set the type property to “Custom” in the AggregateColumnDirective and provide the custom aggregation logic using the customAggregate property.

The custom aggregate function in the Syncfusion® Angular Grid component is executed differently based on the aggregation context:

  • Total Aggregation: The function is executed with the entire dataset and the corresponding aggregate column object.

  • Group Aggregation: The function is executed with the current group details and the aggregate column object.

The following example demonstrates implementing and using a custom aggregate function in the grid component:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { AggregateService, GridModule } from '@syncfusion/ej2-angular-grids';
import { ReturnType } from '@syncfusion/ej2-grids';

@Component({
    imports: [ GridModule],
    providers: [AggregateService],
    standalone: true,
    selector: 'app-root',
    templateUrl: 'app.template.html'
})

export class AppComponent implements OnInit {

    public data?: object[];
    ngOnInit(): void {
        this.data = data;
    }
    public customAggregateFn = (customData: ReturnType) => {
        return customData.result.filter((item: object) => (item as itemType)['ShipCountry'] === 'Brazil').length;
    }
}
interface itemType {
    OrderID: number;
    CustomerID: string;
    EmployeeID: number;
    OrderDate: Date;
    ShipName: string;
    ShipCountry: string;
}
<ejs-grid [dataSource]='data' height='268px'>
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
        <e-column field='Freight' format='C2' width=150></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column columnName="ShipCountry" type="Custom" [customAggregate]="customAggregateFn">
                    <ng-template #footerTemplate let-data>Brazil Count: {{data.Custom}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

In footer, group footer, or caption templates, the custom aggregate value is accessed using the key Custom.

Displaying distinct value count in aggregate row

To display the count of distinct values in an aggregate row for a column, set the type to “Custom” and provide a custom function in the customAggregate property that returns the number of unique values.

The following example demonstrates displaying the distinct count for the “Ship Country” column using a custom aggregate.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { AggregateService, GridComponent, GridModule } from '@syncfusion/ej2-angular-grids';
import { DataUtil } from '@syncfusion/ej2-data';

@Component({
  imports: [ GridModule ],
  providers: [AggregateService],
  standalone: true,
  selector: 'app-root',
  templateUrl: 'app.template.html',
})
export class AppComponent implements OnInit {
  
  @ViewChild('grid')
  public grid?: GridComponent;

  public data: object[] = [];
  ngOnInit(): void {
    this.data = data;
  }
  public customAggregateFn = () => {
    const distinct = DataUtil.distinct(this.data, 'ShipCountry', true);
    return distinct.length;
  };
}
<ejs-grid [dataSource]='data' height='268px'>
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
        <e-column field='Freight' format='C2' width=150></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column columnName="ShipCountry" type="Custom" [customAggregate]="customAggregateFn">
                    <ng-template #footerTemplate let-data>Distinct Count: {{data.Custom}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To display the aggregate value of the current column in another column, use the columnName property. If the columnName property is not defined, the field name value will be assigned to the columnName property.

See also