Grid Grand Total For Dynamic Columns

[PDev]

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.

[Harini Kannan]

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.

App.Component.html

<div *ngIf="showDynamicColumn">

    <e-column

      field="Freight"

      headerText="Freight"

      width="150"

      textAlign="Right"

    ></e-column>

  </div>

App.Component.ts

 

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

 

@Component({

  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;

    this.grid.refreshColumns();

  }

  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/

Regards,

Harini K

[PDev]

why it is not working on OnInit ?

[PDev]

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/ 

[Harini Kannan]

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 {

    this.editSettings={

      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.

Regards,

Harini K

[PDev]

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