Angular TreeList Sorting Basics

The sorting functionality enables you to arrange the data by single or multiple fields in ascending or descending order.

You can enable the sorting feature by using two methods:

• The Data Binding Directives—Allows you to implement sorting (or other data operations) with less code.
• Manual Sorting—Provides more control when implementing the sorting feature.

Using the Data Binding Directives

When you use the built-in binding directives for flat and hierarchical data, the TreeList performs the sorting automatically for you.

Further details on how the data binding directives work under the hood are available in the data operations with the built-in directives documentation section.

Sorting Flat Data

To enable sorting when using flat data:

1. Provide the collection to the built-in kendoTreeListFlatBinding directive.
2. Set the sortable property to true.
3. (Optional) Set the sort property to a collection of SortDescriptor objects. This allows you to sort the data by specific criteria during the initialization of the TreeList.

Copy Code<kendo-treelist
    [kendoTreeListFlatBinding]="treelistData"
    [sortable]="true"
    parentIdField="managerId"
    idField="id"
>
    <kendo-treelist-column field="name"></kendo-treelist-column>
    <kendo-treelist-column field="title"></kendo-treelist-column>
</kendo-treelist>

The following example demonstrates the TreeList sorting functionality when the kendoTreeListFlatBinding directive is applied.

Sorting Hierarchical Data

To enable sorting when using hierarchical data:

1. Provide the collection to the built-in kendoTreeListHierarchyBinding directive.
2. Set the sortable property to true.

Copy Code<kendo-treelist
    [kendoTreeListHierarchyBinding]="data"
    [sortable]="true"
    childrenField="contents"
    >
        <kendo-treelist-column field="type"></kendo-treelist-column>
        <kendo-treelist-column field="size"></kendo-treelist-column>
</kendo-treelist>

The following example demonstrates the TreeList sorting functionality when the kendoTreeListHierarchyBinding directive is applied.

Suggested Links

• Manual Sorting
• Multi-Column Sorting
• API Reference of the TreeListComponent
• API Index of the TreeList