This sample demonstrates the Tree Grid component with the row drag and drop feature within same Tree Grid. It provides the way to drop the row, above, below or child to the target row with the respective to the target row position.
Task ID | Task Name | Start Date | End Date | Duration | Progress | Priority | |
|---|---|---|---|---|---|---|---|
| 1 | Planning | 2/3/2017 | 2/7/2017 | 5 | 100 | Normal | |
| 2 | Plan timeline | 2/3/2017 | 2/7/2017 | 5 | 100 | Normal | |
| 3 | Plan budget | 2/3/2017 | 2/7/2017 | 5 | 100 | Low | |
| 4 | Allocate resources | 2/3/2017 | 2/7/2017 | 5 | 100 | Critical | |
| 5 | Planning complete | 2/7/2017 | 2/7/2017 | 0 | 0 | Low | |
| 6 | Design | 2/10/2017 | 2/14/2017 | 3 | 86 | High | |
| 7 | Software Specification | 2/10/2017 | 2/12/2017 | 3 | 60 | Normal | |
| 8 | Develop prototype | 2/10/2017 | 2/12/2017 | 3 | 100 | Critical | |
| 9 | Get approval from customer | 2/13/2017 | 2/14/2017 | 2 | 100 | Low | |
| 10 | Design Documentation | 2/13/2017 | 2/14/2017 | 2 | 100 | High | |
| 11 | Design complete | 2/14/2017 | 2/14/2017 | 0 | 0 | Normal | |
| 12 | Implementation Phase | 2/17/2017 | 2/27/2017 | 11 | 66 | Normal | |
| 13 | Phase 1 | 2/17/2017 | 2/27/2017 | 11 | 50 | High | |
| 14 | Implementation Module 1 | 2/17/2017 | 2/27/2017 | 11 | 10 | Normal | |
| 15 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 | High | |
| 16 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 | Low | |
| 17 | Testing | 2/20/2017 | 2/21/2017 | 2 | 0 | Normal | |
| 18 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 0 | Critical | |
| 19 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 0 | High | |
| 20 | Phase 1 complete | 2/27/2017 | 2/27/2017 | 0 | 50 | Low | |
| 21 | Phase 2 | 2/17/2017 | 2/28/2017 | 12 | 60 | High | |
| 22 | Implementation Module 2 | 2/17/2017 | 2/28/2017 | 12 | 90 | Critical | |
| 23 | Development Task 1 | 2/17/2017 | 2/20/2017 | 4 | 50 | Normal | |
| 24 | Development Task 2 | 2/17/2017 | 2/20/2017 | 4 | 50 | Critical | |
| 25 | Testing | 2/21/2017 | 2/24/2017 | 2 | 0 | High | |
| 26 | Bug fix | 2/25/2017 | 2/26/2017 | 2 | 0 | Low | |
| 27 | Customer review meeting | 2/27/2017 | 2/28/2017 | 2 | 0 | Critical | |
| 28 | Phase 2 complete | 2/28/2017 | 2/28/2017 | 0 | 50 | Normal | |
| 29 | Phase 3 | 2/17/2017 | 2/27/2017 | 11 | 30 | Normal | |
| 30 | Implementation Module 3 | 2/17/2017 | 2/27/2017 | 11 | 60 | High | |
| 31 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 | Low | |
| 32 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 | Normal | |
| 33 | Testing | 2/20/2017 | 2/21/2017 | 2 | 0 | Critical | |
| 34 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 0 | High | |
| 35 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 0 | Normal | |
| 36 | Phase 3 complete | 2/27/2017 | 2/27/2017 | 0 | 50 | Critical |
Row drag and drop enabled by setting allowRowDragAndDrop property as true. The Row Drag and Drop feature enables the user to row drag and drop the rows between the Tree Grid.