Native TreeList Sorting

The Kendo UI for Vue Native TreeList enables you to sort its data by a single or multiple 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.

Change Theme

Theme

Loading ...

Customizing the Sorting

The default sorting functionality of the TreeList allows you to upgrade it with the following features:

1. Unsort the columns - To enable the unsorting of columns, set the sortable.allowUnsort property to true. With this configuration, when you click on a column header multiple times, one of the columns states will be an "unsorted" column.
2. Sort the records by multiple columns - To enable the multiple columns sorting, set the sortable.mode option to multiple (the property accepts a single or multiple value) .

Change Theme

Theme

Loading ...

Suggested Links

• Data Query Overview
• API Reference of the TreeList
• API Index of the TreeList