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 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:

  • headerClassSpecifies the class to be added to the header cell.
  • headerStyleSpecifies the styles to be added to the header cell.
  • classSpecifies the class to be added to the cell.
  • styleSpecifies the styles to be added to the cell.
  • footerClassSpecifies the class to be added to the footer cell.
  • footerStyleSpecifies the styles to be added to the footer cell.
Example
View Source
Edit In Stackblitz  
Change Theme:

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

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.
Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme: