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

Angular TreeList Multi-Column Sorting

The TreeList sorting feature enables you to sort the data by multiple column fields.

To sort by multiple fields, provide a SortSettings object to the sortable option and set the mode property to multiple.

export class AppComponent {
    public sortSettings: SortSettings = {
        mode: 'multiple'
    };
}

The following example demonstrates sorting the data by multiple fields.

Example
View Source
Change Theme:

Setting the Initial Sort Order

To set the initial sorting order, set the sort property of the TreeList to a collection of SortDescriptor objects. The sorting direction of each field can be set to ascending or descending by configuring the dir property. If dir is not set, the descriptor will not be processed.

export class AppComponent {
    public sort: SortDescriptor[] = [
        { field: "type", dir: "asc" },
        { field: "name", dir: "asc" }
    ];
}

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

Example
View Source
Change Theme:

Disabling the Unsorted State

By default, 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, provide a SortSettings object to the sortable option and set the allowUnsort property to false.

The following example demonstrates how to disable unsorting of the Teelist.

Example
View Source
Change Theme: