Blazor Tree Grid Example - Adaptive Responsive Layout Configuration
Task ID Press Enter to sort. Press Alt Down to open filter Menu | Task Name Press Enter to sort. Press Alt Down to open filter Menu | Duration (In Days) Press Enter to sort. Press Alt Down to open filter Menu | Progress Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| 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 |
This sample demonstrates the adaptive rendering behavior of the Tree Grid with data operations such as filtering, paging, searching, and CRUD. The layout and interactions automatically adjust for optimal usability on mobile and tablet devices.
Enable Adaptive UI by setting the EnableAdaptiveUI property to true.
In this demo, adaptive behavior is showcased along with Excel-style filtering, dialog-based editing, paging, and a responsive toolbar for a seamless cross-device experience.
On smaller screens, filtering opens a full-screen popup for better usability, dialog editing provides a responsive form layout, the toolbar adapts to touch interactions, and paging is optimized for compact views.
More information on adaptive layout can be found in the documentation section.