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 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:

  • headerClassSpecifies the class to be added to the header cell.
  • headerStyleSpecifies the styles to be added to the header cell.
  • classSpecifies the class to be added to the cell.
  • styleSpecifies the styles to be added to the cell.
  • footerClassSpecifies the class to be added to the footer cell.
  • footerStyleSpecifies the styles to be added to the footer cell.
Example
View Source
Edit In Stackblitz  
Change Theme:

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.

In this article

Not finding the help you need?