<ejs-grid [dataSource]='data' [height]='315'>
<e-columns>
<e-column field='FoodName' headerText='Food Name' width=150></e-column>
<e-column field='Protein' headerText='Protein' textAlign='Right' width=120></e-column>
<e-column field='Fat' headerText='Fat' textAlign='Right' width=80></e-column>
<e-column field='Carbohydrate' headerText='Carbohydrate' textAlign='Right' width=120></e-column>
<e-column headerText='Calories Intake' textAlign='Right' [valueAccessor]='totalCalories' width=150></e-column>
</e-columns>
</ejs-grid>
[app.component.html]
. . .
<ejs-grid [dataSource]='data'>
<e-columns>
<e-column field='FoodName' headerText='Food Name' width=150></e-column>
// you can provide dummy field for to generate custom aggregates
<e-column field="Dummy" headerText='Calories Intake' textAlign='Right' [valueAccessor]='totalCalories' width=150></e-column>
. . .
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column columnName="Dummy" type="Custom" [customAggregate]="customAggregateFn">
<ng-template #footerTemplate let-data>Sum: {{data.Custom}}</ng-template>
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
. . .
[App.component.ts]
. . .
public totalCalories = (field: string, data: { Protein: number, Fat: number, Carbohydrate: number }, column: Object): number => {
return data.Protein * 4 + data.Fat * 9 + data.Carbohydrate * 4;
}
public customAggregateFn = (sdata: any) => {
let sum = 0;
sdata.result.forEach((e) => {
sum = sum + (e.Protein * 4 + e.Fat * 9 + e.Carbohydrate * 4);
})
return sum;
}
. . . |