DevExtreme React - Sorting

User Interaction

With the TreeList widget, a user can sort by single and multiple columns. Use the sorting.mode option to specify the current sorting mode.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        sorting: {
            mode: "single" // or "multiple" | "none"
        }
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxo-sorting
        mode="single"> <!-- or "multiple" | "none" -->
    </dxo-sorting>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

In the single mode, a user selects a sort order from the context menu or clicks a column header to apply sorting. Subsequent clicks on the same header reverse the sort order. Applying sorting to another column clears the previous column's sorting settings. In the multiple mode, sorting settings applied to other columns remain intact when a user selects a sort order from another column's context menu. Note that rows are sorted within their hierarchical level.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget TreeList Sorting

The context menu can also be used to clear a column's sorting settings.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget TreeList Sorting

To disable sorting in the whole widget, set the sorting.mode option to "none"; to disable sorting only in a specific column, use its allowSorting option.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        columns: [{
            // ...
            allowSorting: false
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column [allowSorting]="false"></dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
See Also

API

Initial and Runtime Sorting

Rows are sorted according to the data source by default. Set the sortOrder option to sort rows in the required order. Specify the sortIndex option as well to sort by multiple columns. Otherwise, each sorted column gets a sort index according to its position in the columns array. For example, the following code sorts rows first by the "Surname", then by the "Name" column:

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [
            { dataField: "Name",    sortIndex: 1, sortOrder: "asc" },
            { dataField: "Surname", sortIndex: 0, sortOrder: "asc" },
            // ...
        ]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column dataField="Name"    [sortIndex]="1" sortOrder="asc"></dxi-column>
    <dxi-column dataField="Surname" [sortIndex]="0" sortOrder="asc"></dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

Change the sortOrder and sortIndex options using the columnOption method to sort at runtime.

jQuery
JavaScript
var treeList = $("#treeListContainer").dxTreeList("instance");
treeList.columnOption("Surname", {
    sortOrder: "desc",
    sortIndex: 2
});
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    sortBySurnames () {
        this.treeList.instance.columnOption("Surname", {
            sortOrder: "desc",
            sortIndex: 2
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

View Demo

Custom Sorting

Implement a custom sorting routine using the calculateSortValue option if standard sorting does not meet your requirements. It accepts the name of the data source field that provides values to be used in sorting...

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        columns: [{
            dataField: "Position", // provides values for the column
            calculateSortValue: "isOnVacation" // provides values to be used in sorting 
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column
        dataField="Position" <!--provides values for the column -->
        calculateSortValue="isOnVacation"> <!-- provides values to be used in sorting -->
    </dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

...or a function that returns such a value.

jQuery
JavaScript
$(function() {
    var treeList = $("#treeListContainer").dxTreeList({
        columns: [{
            dataField: 'Position',
            sortOrder: "asc",
            calculateSortValue: function (rowData) {
                if (rowData.Position == "CEO")
                    return treeList.columnOption('Position', 'sortOrder') == 'asc' ? "aaa" : "zzz"; // CEOs are always displayed at the top
                else
                    return rowData.Position; // Others are sorted as usual
            }
        }]
    }).dxTreeList("instance");
});
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    customSortingFunction (rowData) {
        let column = this as any;
        if (rowData.Position == "CEO")
            return column.sortOrder == 'asc' ? "aaa" : "zzz"; // CEOs are always displayed at the top
        else
            return rowData.Position; // Others are sorted as usual
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ... >
    <dxi-column
        dataField="Position"
        sortOrder="asc"
        [calculateSortValue]="customSortingFunction">
    </dxi-column>
</dx-tree-list>

Clear Sorting Settings

You can clear sorting settings for all columns by calling the clearSorting() method, or for a specific column - by setting its sortIndex option to undefined using the columnOption method.

jQuery
JavaScript
var treeList = $("#treeListContainer").dxTreeList("instance");
treeList.columnOption("Name", "sortIndex", undefined);
treeList.clearSorting();
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    clearSortingByNames () {
        this.treeList.instance.columnOption("Name", "sortIndex", undefined);
    }
    clearAllSorting () {
        this.treeList.instance.clearSorting();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
See Also