All Components

FooterTemplateDirective

Represents the column footer cell template of the Kendo UI Grid which helps to customize the table footer cell for the column.

To define the footer template, nest a <template> tag with the kendoFooterTemplate directive inside <kendo-grid-column>.

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

  • column—Defines an instance of the ColumnComponent option.
  • columnIndex—Defines the current column index.
@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData" [scrollable]="'none'">
            <kendo-grid-column field="ProductName">
                <template kendoFooterTemplate let-column let-columnIndex="columnIndex">
                  {{column.field}}({{columnIndex}})
                </template>
            </kendo-grid-column>
             <kendo-grid-column field="UnitPrice">
                <template kendoFooterTemplate let-column let-columnIndex="columnIndex">
                  {{column.field}}({{columnIndex}})
                </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

[kendoFooterTemplate]

In this article