Angular Data Grid Styling Cells
The Angular Grid enables you to customize cell appearance with custom CSS and cell templates, including conditional highlighting and filling an entire cell with a custom background.
To style specific cells of the Grid, you can style cells 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 project root
styles.cssfile. - The
encapsulationproperty is set toViewEncapsulation.Nonefor 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
CellTemplateDirectivefor 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> -
To fill the entire Grid cell with a custom background, override the default cell padding of the Grid column through CSS styling. Set the cell height to
1pxand the custom element height to100%.css.k-grid .no-padding { height: 1px; padding: 0; } .whole-cell { display: block; height: 100%; box-sizing: border-box; padding: 11px 10px; /* depends on theme */ }
-
The following example demonstrates how to apply a full-cell background color by using CellTemplateDirective.
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.