Blazor DataGrid Example - Cell Formatting
This sample demonstrates the DataGrid's conditional cell formatting functionality.
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 ![]() |
The Blazor DataGrid allows you to change the cell's entire background. This is possible by using the QueryCellInfo event.
In this demo sample, the Week High and Week Low column cells are decorated with background and text colours via the QueryCellInfo
event to indicate that the current Symbol has reached its high and low values.
More information about the Cell formatting feature can be found in this documentation section.