New to Kendo UI for Angular? Start a free 30-day trial

Column Templates

The Kendo UI TreeList 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 TreeList column or to format the data 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 TreeList column, use the headerStyle option. The styles you set through headerStyle are applied to the header cell only.

Example
View Source
Change Theme:

Cell Template

You can use the cell template to customize the content of the table cells of the TreeList 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 TreeList 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.
Example
View Source
Change Theme:

You can use the footer template to customize footer cell of the TreeList column or to format the data the footer cell displays. For more information on how to define the footer template, refer to the FooterlTemplateDirective 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.

Example
View Source
Change Theme:

Edit Template

You can use the edit template to customize the content of the TreeList column cells when in edit mode. For more information on how to define the edit template, refer to the EditTemplateDirective API documentation.