Footer aggregate value is calculated from all the rows and it can be displayed in footer cells. Use
footerTemplate to render the aggregate value in footer cells.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@Component({
selector: 'app-root',
templateUrl: 'app/app.template.html'
})
export class AppComponent implements OnInit {
public data: object[];
ngOnInit(): void {
this.data = data;
}
}<ejs-grid [dataSource]='data' height='210px'>
<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' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column field="Freight" type="sum">
<ng-template #footerTemplate let-data>Sum: {{data.sum}}</ng-template>
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column field="Freight" type="max">
<ng-template #footerTemplate 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 } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [AggregateService]
})
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 #footerTemplate to specify the footer template.
- The aggregate values must be accessed inside the template using their corresponding
typename.
You can format the aggregate value result by using the
format property.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@Component({
selector: 'app-root',
templateUrl: 'app/app.template.html'
})
export class AppComponent implements OnInit {
public data: object[];
ngOnInit(): void {
this.data = data;
}
}<ejs-grid [dataSource]='data' height='210px'>
<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' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column field="Freight" type="sum">
<ng-template #footerTemplate let-data>Sum: {{data.sum}}</ng-template>
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column field="Freight" type="max">
<ng-template #footerTemplate 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 } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [AggregateService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);By default, the aggregated values are placed at the bottom of the footer section. It is possible to place the aggregated values at the top of the header. This is achieved by using the dataBound event, getHeaderContent, and getFooterContent methods of the Grid.
In the following, footer content is appended to the header content using the dataBound event of the Grid.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid [dataSource]='data' height='210px' (dataBound)="dataBound()">
<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' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column field="Freight" type="sum">
<ng-template #footerTemplate let-data>Sum: {{data.sum}}</ng-template>
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column field="Freight" type="max">
<ng-template #footerTemplate let-data>Max: {{data.max}}</ng-template>
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
}
dataBound() {
this.grid.getHeaderContent().append(this.grid.getFooterContent());
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { AggregateService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [AggregateService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);