Column Templates

The Kendo UI Grid for Angular 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.

To style the header cell of the Grid column, use the headerStyle option. The styles you set through headerStyle are applied to the header cell only.

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.

• To style the table cells of the Grid column, use the style option. The styles you set through style are applied to the table cells only.
• For the specifics of exporting the cell template to Excel, refer to the section on known limitations.

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.

To style the footer cell of the column, use the footerStyle option. The styles you set through footerStyle are applied to the footer cell only.

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.

Suggested Links

• HeaderTemplateDirective
• CellTemplateDirective
• FooterTemplateDirective
• ColumnComponent
• API Reference of the GridComponent
• API Index of the Grid