Grids
Example of Multi Sorting in ASP.NET Core Tree Grid Control
This sample demonstrates the TreeGrid multi sorting feature. To sort two or more columns, hold the CTRL key and click the column header.
2Order Name | 1Category | Order Date | Units |
|---|---|---|---|
| Order 3 | Seafood | 9/10/2017 | 1944 |
| Pharmaceutical Glassware | Solid crystals | 4/19/2017 | 324 |
| Lead glassware | Solid crystals | 2/7/2017 | 542 |
| Glass beads | Solid crystals | 5/22/2017 | 254 |
| Order 2 | Seafood | 1/10/2017 | 1944 |
| Fresh Cheese | Dairy | 6/8/2017 | 323 |
| Butter | Dairy | 9/18/2017 | 413 |
| Blue Veined Cheese | Dairy | 7/10/2017 | 370 |
| White Shrimp | Frozen Seafood | 5/22/2017 | 560 |
| Tilapias | Frozen Seafood | 2/5/2017 | 278 |
| Order 1 | Seafood | 3/2/2017 | 1395 |
| Preserved Olives | Edible | 6/10/2017 | 125 |
Properties
|
Order Name
|
|
|
Category
|
|
|
Order Date
|
|
|
Units
|
|
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 TreeGrid column by simply click the column header. The icons (ascending) and (descending) specifies the sort direction of a column.
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 TreeGrid in a touch device, you have an option for multi sorting in single tap on the treegrid header. By tapping on the treegrid 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,
- Simply click the column header to sort a column.
- Check the checkboxes in the properties panel to sort a column and uncheck to remove sort from a column.
More information on the data binding can be found in this documentation section.