Sorting

7 Feb 20184 minutes to read

The TreeGrid control for JavaScript has in-built support for Sorting one or more columns.

Sorting Columns

TreeGrid allows the items to be sorted in ascending or descending order based on the selected column by enabling the allowSorting property in TreeGrid control. The following code example shows you how to enable Sorting in TreeGrid control.

JS

$("#TreeGridContainer").ejTreeGrid({
             //...
             allowSorting: true,
         });

The TreeGrid columns can also be sorted with custom actions by using the sortColumn method, where the column field name and the sort order should be passed as the method parameters. And the sorting can be cleared using the method clearSorting, calling this method will clear sorting for all the columns in TreeGrid.

Multicolumn sorting

TreeGrid allows you to sort multiple columns by clicking the desired column headers while holding the Ctrl key. The following code example shows you how to enable Multicolumn sorting in the TreeGrid control.

JS

$("#TreeGridContainer").ejTreeGrid({
                //...
                allowSorting: true,
                allowMultiSorting: true,
         });

The following screenshot shows the output of multicolumn sorting in TreeGrid control.

Disable sorting for specific column

It is possible to disable sorting for a specific column by setting allowSorting as false in the column definition.

The below code snippet demonstrates this.

JS

$(function () {
        $("#TreeGridContainer").ejTreeGrid({
            //...
            columns: [
                { field: "taskID", headerText: "Task Id"},
                { field: "taskName", headerText: "Task Name",allowSorting: false },
                { field: "startDate", headerText: "Start Date"},
                { field: "endDate", headerText: "End Date" }
            ]
        })
    });

Sort column at initial load

In TreeGrid, It is possible to render the control with sorted columns, this can be achieve by using sortSettings property. We can add columns which are sorted initially in sortedColumns collection. sortedColumns collection was defined with field and direction properties.

The following code shows how to add sorted column in TreeGrid.

JS

$(function () {
        $("#TreeGridContainer").ejTreeGrid({
            //...
            allowSorting: true,
            sortSettings: {
                sortedColumns: [
                    { field: "taskName", direction: ej.sortOrder.Descending }
                ]
            },
            //...
        })
    });

The above screenshot shows TreeGrid rendered with descending order of Task Name column.