Group and caption aggregate values are calculated from the current group items.
If groupFooterTemplate is provided then the aggregate values can be displayed
in the group footer cells and
if groupCaptionTemplate
is provided then aggregate values can be displayed in the group caption cells.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { GroupSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
templateUrl: 'app/app.template.html'
})
export class AppComponent implements OnInit {
public data: Object[];
public groupOptions: GroupSettingsModel = { showDropArea: false, columns: ['ShipCountry'] };
ngOnInit(): void {
this.data = data;
}
}<ejs-grid [dataSource]='data' height='290px' [allowGrouping]="true" [groupSettings]="groupOptions">
<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='OrderDate' headerText='Order Date' format='yMd' width=120></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 field="Freight" type="sum">
<ng-template #groupFooterTemplate let-data>Sum: {{data.sum}}</ng-template>
</e-column>
<e-column field="Freight" type="max">
<ng-template #groupCaptionTemplate let-data>Max: {{data.max}}</ng-template>
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { AggregateService, GroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [AggregateService, GroupService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
- Use the template reference variable name as #groupFooterTemplate to specify the group footer template and as #groupCaptionTemplate to specify the group caption template.
- The aggregate values must be accessed inside the template using their corresponding
typename.