Sorting

29 Jun 20184 minutes to read

The TreeGrid control has built-in 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 e-allow-sorting option in TreeGrid control. The following code example shows you how to enable Sorting in TreeGrid control.

HTML

<template>
    <div style="padding:10px;">
        <ej-tree-grid 
            e-widget.bind="TreeGrid"
            id="TreeGrid"
            e-allow-sorting="true"
            >
        </ej-tree-grid>
    </div>
</template>

Multicolumn sorting

Gantt allows you to sort multiple columns by clicking the desired column headers while holding the CTRL key with e-allow-multi-sorting as true . The following code example shows you how to enable multicolumn sorting in Gantt control.

HTML

<template>
    <div style="padding:10px;">
        <ej-tree-grid 
            e-widget.bind="TreeGrid"
            id="TreeGrid"
            e-allow-sorting="true"
            e-allow-multi-sorting="true"
            >
        </ej-tree-grid>
    </div>
</template>

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 e-allow-sorting as false in the column definition.
The below code snippet demonstrates this.

HTML

<template>
    <div style="padding:10px;">
        <ej-tree-grid 
            e-widget.bind="TreeGrid"
            id="TreeGrid"
            e-allow-sorting="true"
            e-allow-multi-sorting="true"
            e-columns.bind="columns"
            >
        </ej-tree-grid>
    </div>
</template>

JS

export class DefaultSample {
    constructor() {
        this.columns = [
            { field: 'taskID', headerText: 'Id', width: 70, isFrozen: false, allowSorting: false },
            { field: 'taskName', headerText: 'Task Name'},
            //..
        ];
    }
}

Sort column at initial load

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

HTML

<template>
    <div style="padding:10px;">
        <ej-tree-grid 
            e-widget.bind="TreeGrid"
            id="TreeGrid"
            e-allow-sorting="true"
            e-allow-multi-sorting="true"
            e-sort-settings.bind="sortSettings"
            >
        </ej-tree-grid>
    </div>
</template>

JS

export class DefaultSample {
    constructor() {
        this.sortSettings = {
            sortedColumns: [{ field: 'taskName', direction: ej.SortOrder.Decending }]
        };
    }
}

The following code shows how to add sorted column in TreeGrid.
The below screenshot shows TreeGrid rendered with descending order of Task Name column.