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.
|
[app.component.html]
<ejs-grid #grid [dataSource]="data" [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)="actionBegin($event)">
<e-columns>
. . . .
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="Freight" format="C2">
<ng-template #footerTemplate let-data>Sum: {{data.Sum}}</ng-template>
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
[app.component.ts]
public actionBegin(args): void {
if (args.requestType === 'beginEdit') {
this.selectedRecord = {};
this.selectedRecord = args.rowData; // store the edited row data
}
}
public changeFn(args: any) {
const Freight = 'Freight';
this.selectedRecord[Freight] = args.value; // update the edited value of Frieght in stored row date
this.grid.aggregateModule.refresh(this.selectedRecord);
}
|
|
<div class="control-section">
<ejs-grid #grid [dataSource]='data' height=400 [aggregates]="aggregateColumn" *ngIf='columns.length'[allowPaging] = 'true'>
<e-columns>
<ng-template #colsTemplate ngFor let-column [ngForOf]="columns">
<e-column [field]="column.field" >
</e-column>
</ng-template>
</e-columns>
</ejs-grid>
</div>
|
|
. . .
this.aggregateColumn = [{
columns: [
{
type: 'Sum',
field: 'Freight',
format: 'C2',
footerTemplate: 'Sum: ${Sum}'
}
]
},
{
columns: [{
type: 'Average',
field: 'Freight',
format: 'C2',
footerTemplate: 'Average: ${Average}'
}]
}
];
}
}
|
