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

Apart from sorting by using the interface of dxDataGrid, you can apply sorting in code. To do it 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 to 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();

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();

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.