New to Kendo UI for Angular? Start a free 30-day trial

Sorting

The TreeList enables you to sort on a single or multiple data fields.

Getting Started

To enable sorting, set the sortable option of the Kendo UI TreeList for Angular to true.

Clicking on a column header sorts by the column field. A second click toggles the sort direction and a third one reverts to the unsorted state.

Example
View Source
Change Theme:

Sorting by Multiple Fields

The TreeList supports sorting by several fields. The sorting order is indicated by a number next to the sorting indicator.

To enable multiple-column sorting, set the sortable option to a SortSettings object containing { mode: 'multiple' }.

Example
View Source
Change Theme:

Setting the Initial Sort Order

To set the initial sorting configuration, bind the sort property of the TreeList to a collection of sort descriptors. For more information on how to process data collections, refer to the article on the process helpers for bulk data operations.

The sorting direction of each field can be set to ascending or descending by configuring the dir property of the SortDescriptor to asc or desc respectively. If dir is not set, the descriptor will not be processed.

The following example demonstrates how to set a sortable TreeList with initially applied sorting configuration.

Example
View Source
Change Theme:

Disabling the Unsorted State

The TreeList allows the user to remove a field from the sort order after cycling the sort direction. To disable this behavior and ensure that the fields are always sorted, set the sortable option to a SortSettings object containing { allowUnsort: false }

Example
View Source
Change Theme: