Styling

The Grid enables you to style its columns, rows, and cells.

Columns

To style the columns of the Kendo UI Grid for Angular, use the options for:

• Customizing the rendering of columns
• Setting the background for specific columns

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-grid-column> options:

• headerClass—Specifies the class to be added to the header cell.
• headerStyle—Specifies the styles to be added to the header cell.
• class—Specifies the class to be added to the cell.
• style—Specifies the styles to be added to the cell.
• footerClass—Specifies the class to be added to the footer cell.
• footerStyle—Specifies the styles to be added to the footer cell.

Highlighting Specific Columns

To highlight a specific column of the Grid, 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 Grid, utilize the rowClass function. For an example, refer to the code sample on adding a background color.

Cells

To style specific cells of the Grid, use the options for:

• Styling cells on the fly
• Setting the background for specific row cells

Styling Cells on the Fly

To compute the styles for a cell on the fly:

1. Use the ng-template directive.
2. Override the cell padding.
3. Sanitize the CSS values.

Highlighting Specific Row Cells

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

Suggested Links

• ColumnComponent
• API Reference of the GridComponent
• API Index of the Grid