Sorting feature enables us to order the data in a particular direction. It can be enabled by setting the allowSorting as true.
Task ID | Task Name | Duration | Progress |
|---|---|---|---|
| 1 | Planning | 5 | 100 |
| 2 | Plan timeline | 5 | 100 |
| 3 | Plan budget | 5 | 100 |
| 4 | Allocate resources | 5 | 100 |
| 5 | Planning complete | 0 | 0 |
| 6 | Design | 3 | 86 |
| 7 | Software Specification | 3 | 60 |
| 8 | Develop prototype | 3 | 100 |
| 9 | Get approval from customer | 2 | 100 |
| 10 | Design Documentation | 2 | 100 |
| 11 | Design complete | 0 | 0 |
| 12 | Implementation Phase | 11 | 66 |
| 13 | Phase 1 | 11 | 50 |
| 14 | Implementation Module 1 | 11 | 10 |
| 15 | Development Task 1 | 3 | 50 |
| 16 | Development Task 2 | 3 | 50 |
| 17 | Testing | 2 | 0 |
| 18 | Bug fix | 2 | 0 |
| 19 | Customer review meeting | 2 | 0 |
| 20 | Phase 1 complete | 0 | 50 |
| 21 | Phase 2 | 12 | 60 |
| 22 | Implementation Module 2 | 12 | 90 |
| 23 | Development Task 1 | 4 | 50 |
| 24 | Development Task 2 | 4 | 50 |
| 25 | Testing | 2 | 0 |
| 26 | Bug fix | 2 | 0 |
| 27 | Customer review meeting | 2 | 0 |
| 28 | Phase 2 complete | 0 | 50 |
| 29 | Phase 3 | 11 | 30 |
| 30 | Implementation Module 3 | 11 | 60 |
| 31 | Development Task 1 | 3 | 50 |
| 32 | Development Task 2 | 3 | 50 |
| 33 | Testing | 2 | 0 |
| 34 | Bug fix | 2 | 0 |
| 35 | Customer review meeting | 2 | 0 |
| 36 | Phase 3 complete | 0 | 50 |
Column | |
Direction | |
Sorting feature enables us to order the data in a particular direction. It can be enabled by setting
the allowSorting as true.
To sort a Tree Grid column simply click the column header. The icons (ascending) and (descending) specifies the sort direction of a column.
By default, multi-sorting is enabled in Tree Grid, to sort multiple column hold CTRL key and click the column header. To clear sort for a column, hold SHIFT key and click the column header.
While using Tree Grid in a touch device, you have an option for multi sorting in single tap on the Tree Grid header. By tapping on the Tree Grid header, it will show the toggle button in small popup with sort icon. Now tap the button to enable the multi-sorting in single tap.
In this demo, select the column and direction from the properties panel then click the Sort button. Use the Clear button to remove sort for the selected column.
Injecting Module:
Tree Grid features are segregated into individual feature-wise modules. To use sorting feature, we need to inject
Sort module into the services.
More information on the sorting feature configuration can be found in this documentation section.