Angular Data Grid Styling Rows
The Angular 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
rowClassfunction.
The following example uses a banking transaction log. Rows are highlighted in green for Completed transactions, yellow for Pending ones, and red for Failed or Cancelled entries.
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 uses a healthcare appointment schedule. Rows for Cancelled and No-Show appointments are disabled using the k-disabled class, preventing user interaction with those records.
Styling Rows with Sticky Columns
When the Grid has sticky columns configured, those columns apply the k-grid-content-sticky CSS class to their cells. This class sets its own background color for sticky cells, which overrides any custom row background color you apply through rowClass.
To ensure your custom row colors also apply to sticky column cells, increase the CSS specificity by adding the .k-grid-content-sticky selector alongside your row selector:
#my-grid tr.gold,
#my-grid tr.gold .k-grid-content-sticky {
background-color: #ffba80;
}The following example uses a global shipment tracking log. Rows are highlighted in green for Delivered shipments, yellow for Delayed ones, and red for Exception or Returned shipments. The tracking number and status columns remain sticky while scrolling horizontally.