Blazor Tree Grid Example - Row Height
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 | Start Date Press Enter to sort. Press Alt Down to open filter Menu | End Date 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 | Priority Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| 4871 | Planning | 3/2/2025 | 7/11/2025 | 132 | Open | Normal |
| 4872 | Plan timeline | 3/4/2025 | 3/8/2025 | 5 | In Progress | Normal |
| 4873 | Plan budget | 3/6/2025 | 3/10/2025 | 5 | Started | Low |
| 4874 | Allocate resources | 3/8/2025 | 3/12/2025 | 5 | Open | Critical |
| 4875 | Planning complete | 7/10/2025 | 7/11/2025 | 2 | Open | Low |
| 4876 | Design | 7/15/2025 | 9/20/2025 | 68 | In Progress | High |
| 4877 | Software specification | 7/16/2025 | 7/25/2025 | 10 | Started | Normal |
| 4878 | Develop prototype | 7/26/2025 | 8/10/2025 | 16 | In Progress | Critical |
| 4879 | Get approval from customer | 8/11/2025 | 8/15/2025 | 5 | In Progress | Low |
| 4880 | Design complete | 9/18/2025 | 9/20/2025 | 3 | In Progress | Normal |
| 4881 | Implementation phase | 9/21/2025 | 12/31/2025 | 102 | Started | Normal |
| 4882 | Phase 1 | 9/22/2025 | 10/15/2025 | 24 | Open | High |
| 4883 | Implementation module 1 | 9/23/2025 | 10/14/2025 | 22 | Started | Normal |
| 4884 | Development task 1 | 9/24/2025 | 9/28/2025 | 5 | In Progress | High |
| 4885 | Development task 2 | 9/29/2025 | 10/3/2025 | 5 | Closed | Low |
| 4886 | Testing | 10/4/2025 | 10/7/2025 | 4 | Closed | Normal |
| 4887 | Bug fix | 10/8/2025 | 10/10/2025 | 3 | Validated | Critical |
| 4888 | Customer review meeting | 10/11/2025 | 10/14/2025 | 4 | Open | High |
| 4889 | Phase 1 complete | 10/14/2025 | 10/15/2025 | 2 | Closed | Low |
| 4890 | Phase 2 | 10/16/2025 | 11/15/2025 | 31 | Open | High |
| 4891 | Implementation module 2 | 10/17/2025 | 11/14/2025 | 29 | In Progress | Critical |
| 4892 | Development task 1 | 10/18/2025 | 10/25/2025 | 8 | Closed | Normal |
| 4893 | Development task 2 | 10/26/2025 | 11/2/2025 | 8 | Closed | Critical |
| 4894 | Testing | 11/3/2025 | 11/6/2025 | 4 | Open | High |
| 4895 | Bug fix | 11/7/2025 | 11/10/2025 | 4 | Validated | Low |
| 4896 | Customer review meeting | 11/11/2025 | 11/14/2025 | 4 | In Progress | Critical |
| 4897 | Phase 2 complete | 11/14/2025 | 11/15/2025 | 2 | Open | Normal |
| 4898 | Phase 3 | 11/16/2025 | 12/20/2025 | 35 | In Progress | Normal |
| 4899 | Implementation module 3 | 11/17/2025 | 12/19/2025 | 33 | Validated | High |
| 4900 | Development task 1 | 11/18/2025 | 11/25/2025 | 8 | Closed | Low |
| 4901 | Development task 2 | 11/26/2025 | 12/3/2025 | 8 | Closed | Normal |
| 4902 | Testing | 12/4/2025 | 12/10/2025 | 7 | Closed | Critical |
| 4903 | Bug fix | 12/11/2025 | 12/15/2025 | 5 | Open | High |
| 4904 | Customer review meeting | 12/16/2025 | 12/19/2025 | 4 | In Progress | Normal |
| 4905 | Phase 3 complete | 12/19/2025 | 12/20/2025 | 2 | Open | Critical |
This sample demonstrates configurable row height in the Tree Grid, allowing rows to be displayed with compact, medium, or spacious spacing to suit different readability and layout needs.
Row height is controlled by setting the Tree Grid's RowHeight property. When configured, this property applies a uniform height to all rows.
In this demo, toolbar buttons are used to change the row height to "20px", "40px", or "60px", while the Tree Grid displays all the columns.
More information about the row height feature can be found in this documentation section.