Sorting

The KendoReact TreeList enables you to sort single and multiple data-bound columns.

Getting Started

To enable sorting:

  1. Set the sortable option of the TreeList.
  2. Set the field option of the TreeList column.
  3. Utilize the sort option to apply the sorting styles and buttons to the affected columns.
  4. When sortable is configured and the user tries to sort a column, the onSortChange event is emitted. Handle the onSortChange event where you have the option to sort the data programmatically, to make a request to the server for server sorting, or to use the orderBy function which automatically processes the data.

The following example demonstrates the minimum required configuration for sorting the TreeList records.

Example
View Source
Change Theme:

Customizing the Sorting

The sorting feature of the TreeList enables you to unsort the columns and sort the records by multiple columns.

  • To enable the unsorting of columns, utilize the sortable.allowUnsort option which determines if the columns can be unsorted.
  • To enable the sorting of multiple columns, set the sortable.mode option which accepts a single or multiple value.
Example
View Source
Change Theme: