Blazor Tree Grid Example - Conditional Formatting
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Task ID | Task Name | Assigned | Priority | Status | Start Date | End Date |
|---|
| 1000 | Customer Portal Redesign | Project Manager | Critical | In Progress | 05/01/2025 | 05/04/2025 |
| 1001 | Authentication & Login Flow | Tech Lead | Critical | Open | 10/01/2025 | 14/02/2025 |
| 1002 | Analysis of login flow | Developer | Critical | In Progress | 10/01/2025 | 15/01/2025 |
| 1003 | Implement OAuth2/SSO | Developer | High | Open | 11/01/2025 | 18/01/2025 |
| 1004 | Unit Tests for Login | Developer | Critical | In Progress | 12/01/2025 | 21/01/2025 |
| 1005 | Error Handling for Failed Login | Developer | High | Open | 13/01/2025 | 19/01/2025 |
| 1006 | User Profile Management | Tech Lead | High | Open | 15/01/2025 | 14/02/2025 |
| 1007 | Profile CRUD Operations | Developer | Critical | In Progress | 15/01/2025 | 20/01/2025 |
| 1008 | Validation Rules | Developer | High | Open | 16/01/2025 | 23/01/2025 |
| 1009 | Integration with DB | Developer | High | Open | 17/01/2025 | 26/01/2025 |
| 1010 | Dashboard UI Layout | Tech Lead | High | Open | 20/01/2025 | 17/02/2025 |
| 1011 | Wireframe Design | Developer | Critical | In Progress | 20/01/2025 | 25/01/2025 |
| 1012 | Frontend Implementation | Developer | High | Open | 21/01/2025 | 28/01/2025 |
| 1013 | Accessibility Review | Developer | High | Open | 22/01/2025 | 31/01/2025 |
| 1014 | Notification Center | Tech Lead | High | Open | 25/01/2025 | 26/02/2025 |
| 1015 | Email Alerts | Developer | Critical | In Progress | 25/01/2025 | 30/01/2025 |
| 1016 | Push Notifications | Developer | High | Open | 26/01/2025 | 02/02/2025 |
| 1017 | Error Logging | Developer | High | Open | 27/01/2025 | 05/02/2025 |
| 1018 | Accessibility Compliance | Tech Lead | High | Open | 17/01/2025 | 12/02/2025 |
| 1019 | WCAG Audit | Developer | Critical | In Progress | 17/01/2025 | 22/01/2025 |
| 1020 | Keyboard Navigation | Developer | High | Open | 18/01/2025 | 25/01/2025 |
| 1021 | Screen Reader Support | Developer | High | Open | 19/01/2025 | 28/01/2025 |
| 1022 | Mobile App v2 Development | Project Manager | Critical | In Progress | 10/02/2025 | 26/04/2025 |
| 1023 | Push Notification Service | Tech Lead | High | Open | 15/02/2025 | 22/03/2025 |
| 1024 | Setup Firebase/APNS | Developer | Critical | In Progress | 15/02/2025 | 20/02/2025 |
| 1025 | Integration Tests | Developer | High | Open | 16/02/2025 | 23/02/2025 |
| 1026 | Retry Logic | Developer | High | Open | 17/02/2025 | 26/02/2025 |
| 1027 | Offline Data Sync | Tech Lead | High | Open | 20/02/2025 | 22/03/2025 |
| 1028 | Local Storage Setup | Developer | Critical | In Progress | 20/02/2025 | 25/02/2025 |
| 1029 | Conflict Resolution | Developer | High | Open | 21/02/2025 | 28/02/2025 |
| 1030 | Sync Scheduler | Developer | High | Open | 22/02/2025 | 03/03/2025 |
| 1031 | Payment Gateway Integration | Tech Lead | Critical | Open | 25/02/2025 | 25/03/2025 |
| 1032 | Integrate Stripe/PayPal | Developer | Critical | In Progress | 25/02/2025 | 02/03/2025 |
| 1033 | Transaction Logging | Developer | High | Open | 26/02/2025 | 05/03/2025 |
This sample demonstrates conditional cell styling to highlight values and emphasize important statuses or priorities.
Enable conditional styling by handling the Tree Grid's QueryCellInfo event, and use the provided QueryCellInfoEventArgs to access the current cell's data and apply CSS classes or styles.
In this demo, Status and Priority columns are styled for values such as Open, In Progress, Validated, Closed, Low, Normal, High, and Critical. Parent task names are emphasized to show hierarchy.
More information on cell customization can be found in the documentation section.