Example of Adaptive Layout in Blazor Tree Grid Component
This sample demonstrates the adaptive rendering behavior of Tree Grid features such as filtering, paging, searching and so on.
Task ID | Task Name | Duration | Progress |
|---|
| 1 | Parent task 1 | 34 | In Progress |
| 2 | Child task 1 | 1 | Validated |
| 3 | Child task 2 | 98 | Open |
| 4 | Sub task 1 | 67 | Closed |
| 5 | Sub task 2 | 14 | Closed |
| 6 | Sub task 3 | 67 | Closed |
| 7 | Parent task 2 | 52 | Open |
| 8 | Child task 3 | 1 | Validated |
| 9 | Child task 4 | 98 | Open |
| 10 | Sub task 4 | 67 | Closed |
| 11 | Sub task 5 | 14 | Closed |
| 12 | Sub task 6 | 67 | Closed |
To enable adaptive behavior, set the EnableAdaptiveUI property to true. The filtering, CRUD actions, paging, and other various user interactions in Tree Grid will be adaptive to smaller screens. For example, filtering opens the UI for user in a pop-up occupying the entire screen.
For more information, refer to this documentation section.