Footer for kendo-grid Angular

1
votes

Need help in finding footer sum of kendo-grid angular. 

<kendo-grid [data]="gridData">
    <ng-template ngFor [ngForOf]="columns" let-column>
      <kendo-grid-column field="{{column}}">
          <ng-template kendoGridFooterTemplate>
             {{aggregate[column.value].sum}}
          </ng-template>
      </kendo-grid-column>
    </ng-template>

I expect the output of a grid with columns and corresponding sum of each column in the footer.

The output is showing only grid without the footer.

1
angularkendo-grid

1 Answers

1
votes

OutPut ImageStackBlitz

Template

 <kendo-grid
            [data]="gridData"
        >
        <kendo-grid-column field="ProductID" title="Product ID" width="120">

        </kendo-grid-column>

        <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">

            <ng-template
                kendoGridFooterTemplate
                    let-column="column">Total {{column.title}}: {{total["UnitPrice"].sum}}</ng-template>
        </kendo-grid-column>

        </kendo-grid>

appcomponent.ts

export class AppComponent {
    public aggregates: any[] = [{field: 'UnitPrice', aggregate: 'sum'}];


    public data = [{
        'ProductID': 1,
        'ProductName': 'Chai',
        'UnitPrice': 18.0000
    }, {
        'ProductID': 2,
        'ProductName': 'Chang',
        'UnitPrice': 19.0000
    }, {
        'ProductID': 3,
        'ProductName': 'Aniseed Syrup',
        'UnitPrice': 10.0000
    }, {
        'ProductID': 4,
        'ProductName': "Chef Anton\'s Cajun Seasoning",
        'UnitPrice': 22.0000
    }, {
        'ProductID': 5,
        'ProductName': "Chef Anton\'s Gumbo Mix",
        'UnitPrice': 21.3500
    }];

    public gridData: any = this.data;
    public total: any = aggregateBy(this.data, this.aggregates);

}