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.
<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.
<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.
<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>
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.
<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>
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.