Angular Data Grid Styling Rows

The Grid enables you to customize the appearance of the rows depending on some conditions.

To style the rows of the Grid, use the rowClass function. The callback is executed for each row and allows you to insert custom CSS classes.

To learn more, check the article on how to apply a background color to column cells by using the rowClass function.

The following example demonstrates how to apply a different background color to the rows based on a field value.

Change Theme

Theme

Loading ...

Disabling Rows Conditionally

To prevent the user from interacting with specific rows, you can apply the k-disabled class to the rows.

The following example demonstrates how to disable specific rows by applying the k-disabled class conditionally.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the GridComponent
• API Index of the Grid
• Creating Custom Styles with ThemeBuilder