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:
column
—Defines an instance of the ColumnComponent option.columnIndex
—Defines the current column index.
For more information on how to display aggregates in the footer of the Grid, refer to 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]