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
