Alternating Row Style

 
Region March Sales September Sales March Change September Change Market Share
Europe
$214,424 $224,751 4.44% 3.36% 70%
Asia
$34,487 $40,726 7.21% 6.69% 52%
Oceania
$10,800 $11,000 4.63% 2.73% 80%
Middle East
$12,500 $12,990 0.80% 0.85% 58%
Africa
$68,200 $72,550 1.28% 1.42% 41%
North America
$34,500 $35,800 7.25% 5.03% 84%
South America
$18,500 $19,800 5.41% 3.54% 32%
Data grid with 7 rows and 6 columns
0 rows are selected

Our DevExpress TreeList 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 help enhance readability).

Handle the TreeList'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 the processed element.
  • Attributes — Standard HTML attributes applied to the processed element.
  • Style — A standard HTML style attribute applied to the processed 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.
  • TreeList — Provides access to TreeList properties.