Conditional Formatting

 
Region March Sales September Sales March Change September Change Market Share
Europe
$206,400 $234,300 5.23% 4.61% 70%
 
 
Austria
$22,000 $29,000 13.64% 10.34% 92%
 
 
Belgium
$12,000 $10,500 4.17% 4.76% 16%
 
 
Denmark
$19,000 $21,000 5.26% 4.76% 56%
 
 
France
$23,000 $27,500 8.70% 7.27% 51%
 
 
Germany
$31,000 $35,500 6.45% 5.63% 93%
 
 
Ireland
$9,500 $11,200 3.16% 2.68% 34%
 
 
Italy
$16,500 $19,000 3.03% 2.63% 22%
 
 
Netherlands
$8,800 $9,600 2.27% 2.08% 85%
 
 
Poland
$8,500 $9,700 3.53% 3.09% 52%
 
 
Romania
$4,600 $5,300 4.35% 3.77% 30%
 
 
Spain
$11,000 $10,000 -4.55% -5.00% 82%
 
 
Switzerland
$9,000 $10,500 -2.22% -1.90% 14%
 
 
United Kingdom
$14,000 $15,500 3.57% 3.23% 91%
 
 
Ukraine
$17,500 $20,000 5.71% 5.00% 60%
Asia
$33,300 $39,300 6.61% 5.60% 52%
 
 
China
$20,000 $23,500 7.50% 6.38% 82%
 
 
India
$4,500 $5,300 4.44% 3.77% 44%
 
 
Japan
$8,800 $10,500 5.68% 4.76% 70%
Oceania
$10,000 $10,900 3.00% 2.75% 80%
 
 
Australia
$8,000 $9,100 3.75% 3.30% 75%
 
 
New Zealand
$2,000 $1,800 0.00% 0.00% 40%
Middle East
$11,600 $12,900 2.59% 2.33% 58%
 
 
Saudi Arabia
$4,800 $5,400 4.17% 3.70% 65%
 
 
United Arab Emirates
$6,800 $7,500 1.47% 1.33% 35%
Africa
$63,900 $71,800 2.90% 2.58% 41%
 
 
Egypt
$7,900 $8,700 2.53% 2.30% 52%
 
 
Nigeria
$15,500 $18,000 3.23% 2.78% 30%
 
 
South Africa
$17,000 $18,500 2.94% 2.70% 62%
 
 
Kenya
$11,000 $12,400 2.73% 2.42% 55%
 
 
Morocco
$10,500 $11,900 2.86% 2.52% 48%
 
 
Ghana
$2,000 $2,300 2.50% 2.17% 38%
North America
$32,000 $36,000 4.69% 4.17% 84%
 
 
Canada
$11,700 $13,400 4.27% 3.73% 64%
 
 
USA
$20,300 $22,600 4.93% 4.42% 87%
South America
$17,100 $19,400 4.68% 4.12% 32%
 
 
Argentina
$5,900 $6,700 5.08% 4.48% 88%
 
 
Brazil
$4,500 $5,100 4.44% 3.92% 10%
 
 
Chile
$6,700 $7,600 4.48% 3.95% 70%
Data grid with 39 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. To introduce this capability in your next DevExpress-powered Blazor app, 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.

This demo customizes the appearance of TreeList elements as follows:

  • Nodes with children are gray.
  • Cells in March Change and September Change columns with values larger than 5% are colored green.
  • Cells in March Change and September Change columns with values less than -5% are colored red.