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).
Use this directive to customize the table footer cell for a 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. The following additional fields are available:
column
—An instance of theColumnComponent
option.columnIndex
—The current column index.
For more information about displaying aggregates in the footer of the Grid, see the article on aggregates.
html
<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>
Selector
[kendoGridFooterTemplate]