Angular TreeList Manual Sorting
The manual sorting gives the developer full control over the arranging of the data in the desired order. Compared to the sorting with the built-in directives, the manual approach provides greater transparency of the process because it requires you to handle the TreeList events manually. The manual sorting is especially useful when you require additional customizations of the sorting logic.
To enable sorting:
- Set the
sortable
property. - Bind the
sort
option to a collection ofSortDescriptor
objects. - Handle either of the following events:
sortChange
event—Use this event when you enable only the sorting data operation.dataStateChange
event—Use this event when you enable more than one data operation, for example, sorting and filtering. Check the Data Operations article for more details on how to handle multiple data operations.
The steps above are identical regardless if you process the data locally or send a request to the server to sort the data.
Sorting Local Data
To sort local data, use the built-in orderBy()
or process()
functions.
When filtering is also enabled, handle the
dataStateChange
event instead. For more details, check the section on how to handle multiple data operations.
The following example demonstrates how to sort the data by handling the sortChange
event and using the orderBy()
function.
Sorting on the Server
To sort the TreeList data on the server:
-
Handle the
sortChange
, ordataStateChange
event.html<kendo-treelist (sortChange)="onSortChange($event)" ... ></kendo-treelist>
-
Inside the event handler, send a request containing information about the current TreeList state to the server.
tsexport class AppComponent { ... public onSortChange(descriptors: SortDescriptor[]) { // Send the SortDescriptor array to the server. } }