devexpress-examples/blazor-dxgrid-conditional-formatting

This example demonstrates how to customize the appearance of Blazor grid elements based on custom conditions.

Grid for Blazor - Customize cell appearance based on custom conditions

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

The code example uses summary items to calculate minimum, maximum, and average column values. Based on cell and summary item values, a CustomizeElement 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.

Files to Review

• Index.razor
• Index.razor.css

Documentation

• Custom Element Appearance