Example of Drag and Drop within Tree Grid in Blazor Tree Grid Component
This sample shows the Tree Grid component with row drag and drop functionality within the same tree grid. You can rearrange the tree grid rows by dragging the icon on the tree grid column's left side. It allows you to drop the row above, below, or child to the target row in relation to the target row position.
Task ID | Task Name | Start Date | Duration | Progress | Priority |
|---|
| 1 | Planning | 3/2/2021 | 5 | Open | Normal | |
| 2 | Plan timeline | 3/4/2021 | 5 | In Progress | Normal | |
| 3 | Plan budget | 3/6/2021 | 5 | Started | Low | |
| 4 | Allocate resources | 3/8/2021 | 5 | Open | Critical | |
| 5 | Planning complete | 7/10/2021 | 1 | Open | Low | |
| 6 | Design | 10/12/2021 | 3 | In Progress | High | |
| 7 | Software specification | 10/14/2021 | 3 | Started | Normal | |
| 8 | Develop prototype | 10/16/2021 | 3 | In Progress | Critical | |
| 9 | Get approval from customer | 2/18/2021 | 2 | In Progress | Low | |
| 10 | Design complete | 2/20/2021 | 1 | In Progress | Normal | |
| 12 | Implementation phase | 2/22/2021 | 11 | Started | Normal | |
| 13 | Phase 1 | 2/24/2021 | 11 | Open | High | |
| 14 | Implementation module 1 | 2/26/2021 | 11 | Started | Normal | |
| 15 | Development task 1 | 6/18/2021 | 3 | In Progress | High | |
| 16 | Development task 2 | 2/13/2021 | 3 | Closed | Low | |
| 17 | Testing | 3/2/2021 | 2 | Closed | Normal | |
| 18 | Bug fix | 3/4/2021 | 2 | Validated | Critical | |
| 19 | Customer review meeting | 3/6/2021 | 2 | Open | High | |
| 20 | Phase 1 complete | 4/27/2021 | 2 | Closed | Low | |
| 21 | Phase 2 | 7/17/2021 | 12 | Open | High | |
| 22 | Implementation module 2 | 1/17/2021 | 12 | In Progress | Critical | |
| 23 | Development task 1 | 8/17/2021 | 4 | Closed | Normal | |
| 24 | Development task 2 | 4/17/2021 | 4 | Closed | Critical | |
| 25 | Testing | 1/21/2021 | 2 | Open | High | |
| 26 | Bug fix | 3/25/2021 | 2 | Validated | Low | |
| 27 | Customer review meeting | 7/27/2021 | 2 | In Progress | Critical | |
| 28 | Phase 2 complete | 7/19/2021 | 2 | Open | Normal | |
| 29 | Phase 3 | 7/17/2021 | 11 | In Progress | Normal | |
| 30 | Implementation module 3 | 8/17/2021 | 11 | Validated | High | |
| 31 | Development task 1 | 11/17/2021 | 3 | Closed | Low | |
| 32 | Development task 2 | 12/17/2021 | 3 | Closed | Normal | |
| 33 | Testing | 1/1/2021 | 2 | Closed | Critical | |
| 34 | Bug fix | 1/24/2021 | 2 | Open | High | |
| 35 | Customer review meeting | 12/26/2021 | 2 | In Progress | Normal | |
| 36 | Phase 3 complete | 5/27/2021 | 2 | Open | Critical |
By setting the AllowRowDragAndDrop property to true, you can enable row drag and drop feature.