Conditional Formatting

Company Name City Region Unit Price Quantity Total
Data grid with 21 rows and 6 columns

Our DevExpress Grid for Blazor allows you to customize the appearance of UI elements based on custom conditions. To do so, handle the Grid's CustomizeElement event and use the following event arguments to modify row and cell styles:

  • ElementType — An element type.
  • CssClass — The name of a CSS class applied to a grid element.
  • Attributes — Standard HTML attributes applied to a grid element.
  • Style — A standard HTML style attribute applied to a grid element.
  • VisibleIndex — The visible index of the processed row or row that contains the processed cell.
  • Column- The column that corresponds to the processed cell or group row.
  • Grid — Provides access to grid properties.

This demo customizes appearance of grid elements in the following way:

  • Data rows with Total > 1000 are highlighted.
  • All Total values are bold.
  • If the grid rows are grouped by Country, the group row's tooltip displays group summary values.