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:
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.filterClass
—Specifies the class to be added to the filter row cell.filterStyle
—Specifies the styles to be added to the filter row 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
To compute the styles for a cell on the fly:
- Use the
ng-template
directive. - Override the cell padding.
- 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.