Sorting

Initially, grid records appear in an order specified in the data source. At runtime, these records can be sorted. To sort records by a column, a user must click its header. The first click on the header applies an ascending sort order to the column. Each subsequent click reverses the sort order. When records are sorted by a column, its header is marked with an arrow.

DevExtreme DataGrid Sorting

To clear the applied sorting settings, a user must choose "Clear Sorting" in a context menu that appears after a right-click (long tap in touch UI) on a column header.

DevExtreme DataGrid SortingContextMenu

Detailed information about different sorting modes, options and methods that apply and clear sorting in code is given in the following subtopics.

View Demo

Sorting in UI

In dxDataGrid, records can be sorted by a single or multiple columns. To set an appropriate sorting mode, use the mode field of the sorting configuration object.

JavaScript
var dataGridOptions = {
    // ...
    sorting: {
        mode: 'single' // or 'multiple'
    }
};

Single Mode

By default, a single mode is set. In this mode, records can be sorted only one column at a time. Applying sorting to a column clears sorting settings of other columns. Also, a context menu, which appears when you right-click (long tap in touch UI) a column header, can be used to apply or clear sorting settings of a column. The following animation shows the entire process of sorting in single mode.

DevExtreme DataGrid SortingSingleMode

Multiple Mode

In a multiple mode, when a user clicks column headers, the grid behaves like the sorting mode is single (see the previous subtopic). To sort records by multiple columns, the user must set their sort orders using the context menu mentioned earlier. Obviously, sorting settings can be cleared using this menu. Left-clicking a column header brings single-like sorting behavior back. The process of sorting in the multiple mode is illustrated by the animation below.

DevExtreme DataGrid SortingSingleMode

If sorting must not be permitted for a user, disable it by setting the sorting | mode option to 'none'. You still will be able to apply sorting in code.

JavaScript
var dataGridOptions = {
    // ...
    sorting: {
        mode: 'none'
    }
};

The process of applying sorting can be simplified if the user has the keyboard. For more information on using the keyboard for sorting, see the Using Keyboard to Apply Sorting article.

Sorting in Code

In addition to sorting with the dxDataGrid interface, you can apply sorting in code.

Specify Sort Order and Sort Index in Code

To do this for a column, change its sortOrder option using the columnOption method. Note that if you change this option for multiple columns one after another, sorting will be applied for all of them sequentially. Assume that you have two columns in a grid: "Position" and "Name". The following code will sort grid records first by the Position column, and then by the Name column.

JavaScript
dataGridInstance.columnOption('Position', 'sortOrder', 'asc');
dataGridInstance.columnOption('Name', 'sortOrder', 'asc');

To specify the sequence of applying sorting to columns explicitly, assign sort indexes to these columns. For this purpose, change the column's sortIndex option using the columnOption method. Assume that the "Position" and "Name" columns already have sort orders. In that case, the code below will sort grid records first by the Name column, and then by the Position column.

JavaScript
dataGridInstance.columnOption('Name', 'sortIndex', 0);
dataGridInstance.columnOption('Position', 'sortIndex', 1);

Since sort order and sort index frequently go together, use the following construction to change them both.

JavaScript
dataGridInstance.columnOption('Position', {
    sortOrder: 'asc',
    sortIndex: 0
});
dataGridInstance.columnOption('Name', {
    sortOrder: 'asc',
    sortIndex: 1
});

Define Custom Sorting Function

By default, sorting is conducted using the exact values that the column contains. However, in some cases, this approach may produce poor results. In such cases, it may be preferable to use calculated values for column cells to be used in sorting. For this purpose, assign a function to the calculateSortValue option. This function must return the calculated value to be used for sorting. For example, consider the following code. The calculateSortValue function makes all employees that occupy the CEO position be displayed at the top of the grid when any sorting is applied to the "Position" column. Other employees are sorted as usual.

JavaScript
var dataGridOptions = {
    // ...
    columns: [{
        // ...
        dataField: 'Position',
        calculateSortValue: function (data) {
            if (data.Position == "CEO")
                return dataGridInstance.option('Position', 'sortOrder') == 'asc' ? 0 : data.length; // CEOs must go first
            else
                return data.Position; // Others are sorted as usual
        }
    }, {
        // ...
    }]    
}

Alternatively, the calculateSortValue option can accept the name of the data field whose values must be used to sort grid records. Assuming that data source items have an "isOnVacation" property, you can use the following construction to display those employees that aren't on vacation at the top of the grid.

JavaScript
var dataGridOptions = {
    // ...
    columns: [{
        // ...
        dataField: 'Position',
        calculateSortValue: 'isOnVacation' // Grid records are sorted by this field instead of "Position"
    }, {
        // ...
    }]    
}

Clear Sorting in Code

To clear sorting settings of a column, assign undefined to the sortIndex option of this column using the columnOption method. The following command clears sorting settings from a "Position" column.

JavaScript
dataGridInstance.columnOption('Position', 'sortIndex', undefined);

To clear sorting settings of all columns at once, call the grid's clearSorting() method as shown in the code snippet below.

JavaScript
dataGridInstance.clearSorting();
NOTE
When you export data loaded from the OData service, the sort order of exported data may differ from the sort order of displayed data. It happens because data for export loads without paging, and if the OData service does not sort data before cutting it (for paging), results may not be repeatable. Sort data in the OData service before sending or use client-side sorting in the Data Source (by the primary key, for example).

Setting Initial Sorting

In order to sort grid records by a particular column at design-time, use the sortOrder option for this column. In the following code, the records shown by the grid will be initially sorted by the "Position" column.

JavaScript
var dataGridOptions = {
    // ...
    columns: [{
        // ...
        dataField: 'Position',
        sortOrder: 'asc'
    }, {
        // ...
    }]    
}

If you need to sort by a single column, setting the sortOrder option for that column is sufficient. If, however, you need to sort by multiple columns, you will need to specify the order in which these columns are sorted. In this case, specify the sortIndex option in addition to sortOrder. In the following code, the records shown by the grid will be sorted first by the "Name" column and then, for records with equal "Name" values, by the "Position" column.

JavaScript
var dataGridOptions = {
    // ...
    columns: [{
        // ...
        dataField: 'Position',
        sortOrder: 'asc',
        sortIndex: 1
    }, {
        // ...
        dataField: 'Name',
        sortOrder: 'asc',
        sortIndex: 0
    }, {
        // ...
    }]    
}

Additionally, you can make the initially set sorting impossible for an end-user to change. For this purpose, turn the sorting feature off completely by setting the sorting | mode option to 'none'.

JavaScript
var dataGridOptions = {
    // ...
    sorting: { mode: 'none' } //   Disables the sorting feature
}

Using Keyboard to Apply Sorting

If an end-user is equipped with a keyboard, he or she can clear and apply sorting to multiple columns without using the context menu. In this instance, the user must click a column header with the CTRL key pressed to clear sorting settings of the column.

When multiple sorting is allowed, the first click on a column header with the SHIFT key pressed applies sorting in the ascending order to this column. Subsequent clicks with SHIFT pressed reverses the sort order. In that case, the existing sorting settings of other columns are preserved.