Repository files navigation

The example demonstrates how to customize appearance ofDevExpress Blazor Grid elements based on custom conditions.

The code example usessummary items to calculate minimum, maximum, and average column values. Based on cell and summary item values, aCustomizeElement event handler changes cell appearance in the following columns:

Discount Column
Cells that display positive values are colored green.

Unit Price Column
All cell values are bold. If a cell value is lower than the column average value, the cell's font color is green; otherwise, it is red.

Quantity Column
If a cell value is lower than the average column value, the cell is colored in a shade of red; otherwise, it is a shade of blue. The more a cell value differs from the average value, the brighter the color. If a cell value is equal to the average value, the color is white.

Total Column
A cell displays one of the following arrows based on its value:

• A red arrow pointing down - small values.

• A yellow arrow pointing left - medium values.

• A green arrow pointing up - large values.

• Index.razor
• Index.razor.css

• Custom Element Appearance

(you will be redirected to DevExpress.com to submit your response)