Blazor Tree Grid Example - Auto Wrap Column Cells
This sample demonstrates the Tree Grid component with the auto wrap column cell feature. In this sample, the Task Name column cell content exceeds the available width and hence it has been wrapped into multiple lines.
Task ID | Task Name | Duration | Progress | Priority | Approved |
|---|
| 1 | Planning | 5 | Open | Normal | |
| 2 | Plan timeline | 5 | In Progress | Normal | |
| 3 | Plan budget | 5 | Started | Low | |
| 4 | Allocate resources | 5 | Open | Critical | |
| 5 | Planning complete | 1 | Open | Low | |
| 6 | Design | 3 | In Progress | High | |
| 7 | Software specification | 3 | Started | Normal | |
| 8 | Develop prototype | 3 | In Progress | Critical | |
| 9 | Get approval from customer | 2 | In Progress | Low | |
| 10 | Design complete | 1 | In Progress | Normal |
Auto wrap feature can be enabled by using the AllowTextWrap property of Tree Grid. Enabling this property will wrap the cell text to multiple lines. This feature is useful to view the cell content when it exceeds the cell width.
Setting this property will wrap the text in both content cell and header cell.
More information about the Auto wrap cells can be found in this documentation section.