Example of Sorting API in Javascript Tree Grid Control

All Controls
/
Tree Grid
/
Sorting API

Sorting feature enables us to order the data in a particular direction. It can be enabled by setting the allowSorting as true.

More Details...

1
Planning
2/3/2017100
2
Plan timeline
2/3/2017100
3
Plan budget
2/3/2017100
4
Allocate resources
2/3/2017100
5
Planning complete
2/7/20170
6
Design
2/10/201786
7
Software Specification
2/10/201760
8
Develop prototype
2/10/2017100
9
Get approval from customer
2/13/2017100
10
Design Documentation
2/13/2017100
11
Design complete
2/14/20170
12
Implementation Phase
2/17/201766
13
Phase 1
2/17/201750
14
Implementation Module 1
2/17/201710
15
Development Task 1
2/17/201750
16
Development Task 2
2/17/201750
17
Testing
2/20/20170
18
Bug fix
2/24/20170
19
Customer review meeting
2/26/20170
20
Phase 1 complete
2/27/201750
21
Phase 2
2/17/201760
22
Implementation Module 2
2/17/201790
23
Development Task 1
2/17/201750
24
Development Task 2
2/17/201750
25
Testing
2/21/20170
26
Bug fix
2/25/20170
27
Customer review meeting
2/27/20170
28
Phase 2 complete
2/28/201750
29
Phase 3
2/17/201730
30
Implementation Module 3
2/17/201760
31
Development Task 1
2/17/201750
32
Development Task 2
2/17/201750
33
Testing
2/20/20170
34
Bug fix
2/24/20170
35
Customer review meeting
2/26/20170
36
Phase 3 complete
2/27/201750
Column
Direction
Description

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 using the TreeGrid.Inject(Sort) section. More information on the sorting feature configuration can be found in this documentation section.