Blazor DataGrid Example - Cell Formatting
Symbol | Open | High | Low | Change | 52wh | 52wl | 365 Days %Chg | 365 Days %Chg |
|---|
| DDNDKJ | 6088.2 | 6114.5 | 6084.15 | 12.5 | 6114.55 | 4770.35 | 14.37 ![]() | 9.87 ![]() |
| FKLND | 2042 | 2108.4 | 2042 | 77.8 | 2108.4 | 1526.4 | 23.7 ![]() | 10.55 ![]() |
| DSNNS | 740 | 772.3 | 740 | 26.6 | 772.3 | 496.4 | 47.28 ![]() | 23.2 ![]() |
| MLSSD | 939.5 | 958.2 | 939.5 | 22.1 | 998.85 | 553 | 47.28 ![]() | 9.87 ![]() |
| LKSNDL | 4641.1 | 4749.75 | 4641.1 | 99.25 | 5050 | 3432.4 | 61.24 ![]() | 11.63 ![]() |
| NKJSN | 445 | 451.9 | 442 | 6.95 | 578.4 | 370.8 | 229.67 ![]() | 4.45 ![]() |
| LNKNDS | 298.5 | 303.95 | 298.5 | 4.25 | 386.25 | 289.4 | -9.42 ![]() | 3.13 ![]() |
| NSDN | 400 | 403 | 397.95 | 4 | 435 | 300 | -5.4 ![]() | -1.52 ![]() |
| SDMSMD | 162.75 | 164.85 | 162.4 | 1.85 | 207.95 | 140.3 | 23.21 ![]() | 0.79 ![]() |
| SMMSDS | 75.4 | 76.45 | 75.2 | 0.75 | 106.7 | 58 | -6 ![]() | 11.78 ![]() |
| MSMDM | 2291 | 2315.1 | 2291 | 20.4 | 2551.7 | 1802.3 | 28.37 ![]() | 15.28 ![]() |
| MLKSDM | 329.7 | 329.7 | 327.2 | 2.65 | 355 | 227.4 | 25.55 ![]() | 14.38 ![]() |
| BDSBD | 730.5 | 736.75 | 727.15 | 5.55 | 736.75 | 524.1 | 26.87 ![]() | 8.65 ![]() |
| SKJDB | 421.5 | 424.9 | 416 | 295 | 789.35 | 3.15 | 35.8 ![]() | 15.32 ![]() |
| BDSDH | 505 | 509 | 503 | 3.35 | 509.5 | 279 | -40.65 ![]() | 13.13 ![]() |
| DSJBD | 1730 | 1739.95 | 1721.2 | 10.05 | 1739.95 | 1051 | 61.28 ![]() | 31.47 ![]() |
| BSBDBD | 1161 | 1172 | 1161 | 6.25 | 1232 | 767.4 | 37.73 ![]() | 23.04 ![]() |
| BDBSJ | 770 | 776 | 768.65 | 4.05 | 920 | 659.2 | 49.9 ![]() | 16.66 ![]() |
| NSDJN | 106 | 106.8 | 105.35 | 0.55 | 137.1 | 86.9 | 2.89 ![]() | 9.53 ![]() |
| NDSS | 3000.3 | 3040 | 3000.3 | 14.9 | 3510 | 2210 | -9.36 ![]() | 17.1 ![]() |
| NKDN | 126 | 128 | 126 | 0.6 | 202.8 | 121.85 | 22.41 ![]() | 10.6 ![]() |
This sample demonstrates the DataGrid's conditional cell formatting functionality.
The Blazor DataGrid allows you to customize the appearance of cells by changing their background and text colors. This is achieved using the QueryCellInfo event, which provides access to cell data and allows you to apply custom styling based on your conditions.
In this demo, the Week High and Week Low column cells are decorated with background and text colors through the QueryCellInfo event to visually indicate when the current symbol has reached its high and low values.
For more detailed information about cell formatting, refer to the cell styles documentation.

