Styling

The TreeList enables you to style its columns, rows, and cells.

Columns

To style the columns of the Kendo UI TreeList for Angular, use the options for:

• Customizing the rendering of columns
• Setting the background for specific columns

Customizing Column Styles

You can add a custom CSS class or style to the header, footer, and cell elements of the current column by using the following <kendo-treelist-column> options:

• headerClass—Specifies the class to be added to the header cell.
• headerStyle—Specifies the styles to be added to the header cell.
• class—Specifies the class to be added to the cell.
• style—Specifies the styles to be added to the cell.
• footerClass—Specifies the class to be added to the footer cell.
• footerStyle—Specifies the styles to be added to the footer cell.

Highlighting Specific Columns

To highlight a specific column of the TreeList, use the class input of the ColumnComponent. For an example, refer to the API documentation of the ColumnComponent.

Rows

To style the rows of the TreeList, utilize the rowClass function. For an example, refer to the code sample on adding a background color.

Suggested Links

• ColumnComponent
• API Reference of the TreeListComponent
• API Index of the TreeList