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. 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 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
$("#gridContainer").dxDataGrid({
    // ...
    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 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 the 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.

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 changing this option for multiple columns in a row applies sorting for all of them sequentially.

To specify the sequence of applying sorting to columns, assign sort indexes to these columns in addition to the sort order. The sort index is specified by the sortIndex option, which can also be changed by calling the columnOption method. Since setting the sort index is useless without specifying the sort order, it is recommended that you call the columnOption method in a manner shown below. Note that the calls of the columnOption method are wrapped in the beginUpdate() - endUpdate() construction in order to prevent the widget form unnecessary updating.

JavaScript
dataGridInstance.beginUpdate();
dataGridInstance.columnOption('columnId', 'sortIndex', 0);
dataGridInstance.columnOption('columnId', 'sortOrder', 'asc');
dataGridInstance.endUpdate();

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 cell value for sorting. Alternatively, assign the name of the field whose value will be used to sort current column values.

Clear Sorting in Code

To clear sorting settings of a column, assign undefined to the sortIndex option of this column using the columnOption method. 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 be not 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

To specify sorting settings for a column at design-time, use the sortOrder option of this column. If you are applying sorting to a single column, setting this option is sufficient. If you require multiple initial sorting, you may want to specify the sequence of applying it to grid columns. In that case, specify the sortIndex option in addition to sortOrder.

Additionally, you can make the initially set sorting impossible for an end-user to change. For this purpose, assign false to the allowSorting option of the columns with sorting applied, or turn the sorting off completely by setting the sorting | mode option to 'none'.

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.