Sorting

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.