Column Templates
The Kendo UI for Angular Grid provides templates for customizing its header, footer, and cells.
Header Template
You can use the header template to customize the header cell of the Grid column or to format the data that the header cell displays. For more information on how to define the header template, refer to the HeaderTemplateDirective API documentation.
The header template exposes the current column (let-column) and its index (let-columnIndex="columnIndex"). Use these values to customize the header for each column.
To style the header cell of the Grid column, use the
headerStyleoption. The styles you set throughheaderStyleare applied to the header cell only.
The following example uses header templates to display column titles with icons and descriptive subtitles.
Cell Template
You can use the cell template to customize the content of the table cells of the Grid column (excluding the header and footer ones) or to format the data the table cells display. For more information on how to define the cell template, refer to the CellTemplateDirective API documentation.
The cell template exposes the current data item (let-dataItem), row index (let-rowIndex="rowIndex"), column index (let-columnIndex="columnIndex"), and column instance (let-column="column"). Use these values to display row data or adjust cell content based on its position or column.
- To style the table cells of the Grid column, use the
styleoption. The styles you set throughstyleare applied to the table cells only.- For the specifics of exporting the cell template to Excel, refer to the section on known limitations.
The following example uses cell templates to display patient details, row indexes, and risk and insurance statuses.
Footer Template
You can use the footer template to customize footer cell of the Grid column or to format the data the footer cell displays. For more information on how to define the footer template, refer to the FooterTemplateDirective API documentation.
The footer template exposes the current column (let-column) and its index (let-columnIndex="columnIndex"). Use these values to customize the footer for each column.
To style the footer cell of the column, use the
footerStyleoption. The styles you set throughfooterStyleare applied to the footer cell only.
The following example uses footer templates to summarize patient counts, average age, risk distribution, insurance coverage, and charges.
Edit Template
You can use the edit template to customize the content of the Grid column cells when in edit mode. For more information on how to define the edit template, refer to the EditTemplateDirective API documentation.
The edit template exposes formGroup, rowIndex, dataItem, column, and isNew. Use these values to configure an editor for the current item. In template-driven forms, formGroup is undefined; for a new item row, rowIndex is -1.