Blazor Tree Grid Example - Conditional Formatting
This samples demonstrates the way of customizing the cells by highlighting the cells of Duration column based on certain condition using the QueryCellInfo event.
Task ID | Task Name | Duration | Progress | Priority | Approved |
|---|
| 1 | Parent task 1 | 34 | In Progress | Critical | |
| 2 | Child task 1 | 1 | Validated | Critical | |
| 3 | Child task 2 | 98 | Open | Low | |
| 4 | Sub task 1 | 67 | Closed | Normal | |
| 5 | Sub task 2 | 14 | Closed | Normal | |
| 6 | Sub task 3 | 67 | Closed | Normal | |
| 7 | Parent task 2 | 52 | Open | Low | |
| 8 | Child task 3 | 1 | Validated | Critical | |
| 9 | Child task 4 | 98 | Open | Low | |
| 10 | Sub task 4 | 67 | Closed | Normal | |
| 11 | Sub task 5 | 14 | Closed | Normal | |
| 12 | Sub task 6 | 67 | Closed | Normal |
The appearance of cells can be customized by using the QueryCellInfo event. The QueryCellInfo event triggers for every cell, and the details of each cell can be obtained in the QueryCellInfoEventArgs argument of the event handler.
More information about conditional formatting can be found in this documentation section.