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

Angular TreeList Styling Cells

Updated on May 27, 2026

The Angular TreeList enables you to customize the appearance of the cells and change their default layout based on conditions.

To style specific cells of the TreeList, you can apply dynamic styling on the fly or set the background for specific row cells.

The custom CSS rules take effect if:

They are set globally in the project, for example, in the root styles.css file.
The encapsulation property is set to ViewEncapsulation.None for the component where the custom styles are used.

Styling Cells on the Fly

You can apply specific styling to the cells dynamically. To compute the styles for a cell on the fly:

Define the CellTemplateDirective for the corresponding column.

Apply a custom background color to the whole cell:

Wrap the cell value in a custom HTML element and set custom classes for the element and the TreeList column.

html

<kendo-treelist-column field="nodeType" title="Node Type" class="no-padding">
    <ng-template kendoTreeListCellTemplate let-dataItem>
        <span class="whole-cell" [style.backgroundColor]="colorNodeType(dataItem.nodeType)">
            {{ dataItem.nodeType }}
        </span>
    </ng-template>
</kendo-treelist-column>

Override the default cell padding of the TreeList column through CSS styling.

css

.k-treelist .no-padding {
    padding: 0;
}
.whole-cell {
    display: block;
    padding: 11px 10px; /* depends on theme */
}

The following example demonstrates how to style the cell background color by using CellTemplateDirective.

Change Theme

Theme

Loading ...

Highlighting Specific Row Cells

To highlight a specific row cell of the TreeList, combine the rowClass and the component class option of the ColumnComponent. As a result, the styles you want to use will apply only when both settings are active.

The following example demonstrates how to apply a background color to specific cells using the rowClass function.