Aggregate with dynamic columns

[Benjamim Goulart Bessa]

Olá,

How can I add aggregate values when I use dynamic columns approach like this:

<ejs-grid #grid

     [allowFiltering]='false'

     [allowPaging]=false

     [columns]='gridColumns'

     [dataSource]='gridSource'

     height='240'>

</ejs-grid>

  gridColumns = [

    { field: "Descricao", headerText: "Descrição", allowEditing: false, width: "70%" },

    { field: "Valor", headerText: "Valor", allowEditing: false, format: "N2", textAlign: "Right", width: "30%" },

  ];

Thank's for helping

[Praveenkumar Gajendiran]

Hi Benjamim,

Greetings from Syncfusion support.

We checked your query and based on that we prepared a sample with dynamic column with aggregation in Grid and shared the same for your reference. 

 

Please check the below code example and sample for more information. 

 

Code Example: 

[app.component.html]

<div class="control-section"> 

    <ejs-grid [dataSource]="data" [allowPaging]="true" [pageSettings]='pageOption' [columns]='columns' [aggregates]="aggregates">  

    </ejs-grid> 

</div>

--------------------------------------------------------------------------------------------------
[app.component.ts] 

export class AppComponent { 

    public data: Object[]; 

    public pageOption: Object = {pageCount: 5}; 

    public columns: Object; 

    public aggregates: Object; 

    public ngOnInit(): void { 

        this.data = orderData; 

      this.columns = [ 

        { field: 'CustomerName', headerText: 'Customer Name', textAlign: 'Right', width: 150 }, 

        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 150, format: 'C2' }, 

        { field: 'OrderDate', headerText: 'Order Date', width: 150, textAlign: 'Right', format: 'yMd' }, 

        { field: 'ShipCountry', headerText: 'ShipCountry', width: 150 }, 

      ]; 

      this.aggregates = [{ 

        columns: [{ 

          type: 'Sum', 

          field: 'Freight', 

          format: 'C2', 

          footerTemplate: 'Sum: ${Sum}' 

        }] 

      }, 

      { 

        columns: [{ 

          type: 'Average', 

          field: 'Freight', 

          format: 'C2', 

          footerTemplate: 'Average: ${Average}' 

        }] 

      }] 

    } 

} 

 

Sample:  https://stackblitz.com/edit/angular-vmd6b9-2bqskd?file=app.component.ts 

 

Refer the  below document for columns and aggregates API of Grid,

Documentation Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#columns
                                      https://ej2.syncfusion.com/angular/documentation/api/grid/#aggregates

Please get back to us if you need further assistance. 

Regards,
Praveenkumar G