<ejs-grid #grid [dataSource]='data' [allowPdfExport]='true' [aggregates]='aggregates'[toolbar]='toolbar' (toolbarClick)='toolbarClick($event)'
[allowResizing]="true" [allowGrouping]="true" [groupSettings]="groupOptions">
<e-columns>
. . . .
<e-column field='Freight' headerText='Freight' type='number' width='120' format='C2' [enableGroupByFormat]='true'></e-column>
</e-columns>
</ejs-grid> |
this.aggregates = [{
columns: [{
type: 'Sum',
field: 'Freight',
format: 'C2',
groupFooterTemplate: '<b><font color="blue">Tot:${Sum}</font></b>'
}]
},
{
columns: [{
type: 'Sum',
field: 'Freight',
format: 'C2',
footerTemplate: '<b><font color="blue">Gen.Tot:${Sum}</font></b>'
}]
}];
}
|
Hi Isaias,Thanks for contacting Syncfusion support.We have validated the reported problem and we found the angular Ng-template have some technical limitation while compiling Ng-template so we suggest you to render the aggregates in type script way to overcome the reported problem.Please refer the following code example and modified sample for more information.
<ejs-grid #grid [dataSource]='data' [allowPdfExport]='true' [aggregates]='aggregates'[toolbar]='toolbar' (toolbarClick)='toolbarClick($event)'[allowResizing]="true" [allowGrouping]="true" [groupSettings]="groupOptions"><e-columns>. . . .<e-column field='Freight' headerText='Freight' type='number' width='120' format='C2' [enableGroupByFormat]='true'></e-column></e-columns></ejs-grid>
this.aggregates = [{columns: [{type: 'Sum',field: 'Freight',format: 'C2',groupFooterTemplate: '<b><font color="blue">Tot:${Sum}</font></b>'}]},{columns: [{type: 'Sum',field: 'Freight',format: 'C2',footerTemplate: '<b><font color="blue">Gen.Tot:${Sum}</font></b>'}]}];}Regards,Hariharan