New to Kendo UI for Angular? Start a free 30-day trial

FooterTemplateDirective

Represents the column footer cell template of the Grid (more information and example). Helps to customize the table footer cell for the column. To define a footer template, nest an <ng-template> tag with the kendoGridFooterTemplate directive inside the <kendo-grid-column> tag.

The template context is set to the current column and the following additional fields are passed:

  • columnDefines an instance of the ColumnComponent option.
  • columnIndexDefines the current column index.

For more information on how to display aggregates in the footer of the Grid, refer to the article on aggregates.


@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData" scrollable="none">
            <kendo-grid-column field="ProductName">
                <ng-template kendoGridFooterTemplate let-column let-columnIndex="columnIndex">
                  {{column.field}}({{columnIndex}})
                </ng-template>
            </kendo-grid-column>
             <kendo-grid-column field="UnitPrice">
                <ng-template kendoGridFooterTemplate let-column let-columnIndex="columnIndex">
                  {{column.field}}({{columnIndex}})
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
    `
})

class AppComponent {
    public gridData = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": false
      }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": true
      }
    ];
}

Selector

[kendoGridFooterTemplate]

In this article

Not finding the help you need?