We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid Grand Total For Dynamic Columns

Can you provide me the Typescript Code Sample which will allow me to dynamically add Grand Total in my Grid. I have dynamic columns in Grid for which i want to create Sum. https://help.syncfusion.com/js/grid/summary https://ej2.syncfusion.com/angular/documentation/grid/aggregates/footer-aggregate I am just trying to use code from above link but its not helping. if you can provide some sample for creating aggregates that would be great.

8 Replies

HK Harini Kannan Syncfusion Team May 12, 2023 09:46 AM UTC

Hi PDev

Query: Grid Grand Total for Dynamic Columns

As per your query we have provided a typescript code sample which allows to dynamically add Grand Total in Grid.   In this code we included the *ngIf="showDynamicColumn" directive is used to conditionally render the column based on the value of the showDynamicColumn property in the component. In the OnClick function, the column object is created with the desired properties for the dynamic column ('Freight').  The aggregateOptions object is assigned to this.grid.aggregates to enable the sum aggregation for the 'Freight' column. Finally, the this.grid.refreshColumns() method is called to refresh the grid columns and display the newly added dynamic column. With this code, clicking a button it will trigger the OnClick function, adding the 'Freight' column dynamically to the grid and applying the sum aggregation.


<div *ngIf="showDynamicColumn">










import { AggregateService, GridComponent } from '@syncfusion/ej2-angular-grids';



  selector: 'app-root',

  templateUrl: 'app.component.html',

  providers: [AggregateService],




 OnClick() {

    var column = { field: 'Freight', headerText: 'Freight', width: 150 };

    this.grid.columns.push(column as any);

    this.grid.aggregates = this.aggregateOptions;



  public aggregateOptions: any = [


      columns: [


          type: 'Sum',

          field: 'Freight',

          format: 'C2',

          footerTemplate: 'Sum: ${Sum}',






Sample: https://stackblitz.com/edit/angular-zckuud-2gynrd?file=src%2Fapp.component.html

API : https://helpej2.syncfusion.com/angular/documentation/api/grid/aggregateType/


Harini K

PD PDev May 16, 2023 03:49 AM UTC

why it is not working on OnInit ?

PD PDev May 17, 2023 02:47 PM UTC

any update on aggregates ? I have dynamic columns and i want to load aggregates on page and on cell edit/cell save events. Please look this into priority/ 

HK Harini Kannan Syncfusion Team May 18, 2023 05:21 PM UTC

Hi PDev

Query: Grid Grand Total for Dynamic Columns

Based on your query we solved your issue on aggregates by suggesting to declare aggregates globally and we have provided a sample for loading aggregates on page and on cell edit .

Code snippet:


 public aggregateOptions: any;


  ngOnInit(): void {


      allowEditing: true,

      allowAdding: true,

      allowDeleting: true,

      mode: 'Batch',


Sample: https://stackblitz.com/edit/angular-zckuud-bibkzx?file=src%2Fapp.component.ts

Please let us know if you need further assistance.


Harini K

PD PDev May 19, 2023 12:35 AM UTC

As you can see it still does not show. am i missing anything?

I have also tried adding button click code on page load but it does not show aggregates

Request you to look this into it on urgent basis , please