Angular TreeList Styling Cells
The TreeList enables you to customize the appearance of the cells and change their default layout based on some conditions.
To style specific cells of the TreeList, you can:
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 and set the padding for the wrapper element.
<ng-template kendoTreeListCellTemplate let-dataItem> <span style="display: block; padding: 8px 12px;" [style.backgroundColor]="colorType(dataItem.type)"> {{ dataItem.type }} </span> </ng-template>
- Override the default cell padding of the TreeList through CSS code.
.k-treelist .no-padding { padding: 0; }
- Wrap the cell value and set the padding for the wrapper element.
- Sanitize the CSS values in the background color function.
public colorType(type: string): SafeStyle { ... return this.sanitizer.bypassSecurityTrustStyle(myColor); }
The following example demonstrates how to style the cell background color by using CellTemplateDirective
.
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 by the rowClass
function.