Alternating Row Style

 
Company Name City Region Country Unit Price Quantity Total
Vins et alcools Chevalier Reims   France $14.00 12 $168.00
Vins et alcools Chevalier Reims   France $10.00 10 $100.00
Vins et alcools Chevalier Reims   France $35.00 5 $175.00
Toms Spezialitäten Münster   Germany $19.00 9 $171.00
Toms Spezialitäten Münster   Germany $42.00 40 $1,680.00
Hanari Carnes Rio de Janeiro RJ Brazil $8.00 10 $80.00
Hanari Carnes Rio de Janeiro RJ Brazil $42.00 35 $1,470.00
Hanari Carnes Rio de Janeiro RJ Brazil $17.00 15 $255.00
Victuailles en stock Lyon   France $17.00 6 $102.00
Victuailles en stock Lyon   France $16.00 15 $240.00
of 216

Our DevExpress Grid for Blazor allows you to customize the appearance of UI elements based on custom conditions. This module demonstrates how to highlight alternating (odd) rows with a different style to enhance readability.

To do this, 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 the appearance of grid elements in the following way:

  • All odd rows are highlighted.
  • Column headers are bold.
  • The custom background color is applied to the column header row.