New to Kendo UI for Angular? Start a free 30-day trial
Angular Data Grid Styling Cells
The Angular Grid enables you to customize the appearance of the cells and change their default layout based on some conditions.
To style specific cells of the Grid, you can:
The custom CSS rules take effect if:
- They are set globally in the project. For example, in the project root
styles.css
file. - The
encapsulation
property is set toViewEncapsulation.None
for the specific 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 Grid column.
html
<kendo-grid-column field="InStock" title="In Stock" class="no-padding"> <ng-template kendoGridCellTemplate let-dataItem> <span class="whole-cell" [style.backgroundColor]="stockColor(dataItem.InStock)"> {{ dataItem.InStock }} </span> </ng-template> </kendo-grid-column>
- Override the default cell padding of the Grid column through CSS styling.
css
.k-grid .no-padding { padding: 0; } .whole-cell { display: block; padding: 8px 12px; /* depends on theme */ }
- Wrap the cell value in a custom HTML element and set custom classes for the element and the Grid column.
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 Grid, 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.
Change Theme
Theme
Loading ...