Configuration sorting

Specifies options of runtime sorting.

Type: Object

In dxDataGrid, a user can sort records by columns at runtime. To make a column available for sorting, set its allowSorting option to true. Sorting can be executed in various modes. To specify the required mode, use the mode property of the sorting configuration object.

See Also

For a structured overview of dxDataGrid sorting capabilities, see the Sorting article.

Show Example:
jQuery

In this example, you can sort grid records by multiple columns as the sorting | mode option is set to 'multiple'. To sort records by only one column, click a column header. To sort records by multiple columns, right-click a column header and choose a sort order for the column.

<div id="gridContainer" style="height:380px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $("#gridContainer").dxDataGrid({
        dataSource: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        paging: { pageSize: 8 },
        sorting: { mode: 'multiple' }
    });
});

ascendingText

Specifies text for the context menu item that sets an ascending sort order in a column.

Type: String
Default Value: 'Sort Ascending'

In order to apply sorting to a column, a user calls a context menu by right-clicking the header of this column. Using this menu, the user can choose a sort order or reset sorting settings for this column. The text of the menu items can be customized using the ascendingText, descendingText and clearText options correspondingly.

Show Example:
jQuery

In this example, you can change the name of the context-menu item that applies an ascending sort order to a column. Type your text in the text box under the grid. After that, make the text box lose focus by clicking the surrounding area. The typed text will be assigned to the sorting | ascendingText option. To see the result of this alteration, right-click any column header.

<div id="gridContainer" style="height: 380px; max-width: 800px; margin: 0 auto"></div>
<div id="textBoxContainer" style="height: 45px; width: 280px; text-align: center"></div>
$(function () {
    $("#gridContainer").dxDataGrid({
        dataSource: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ],
        paging: { pageSize: 8 },
        sorting: { mode: 'multiple' }
    });

    $("#textBoxContainer").dxTextBox({
        placeholder: 'Type something here to change the sorting | ascendingText option',
        height: 40,
        width: 430,
        valueChangeAction: function (info) {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                sorting: { ascendingText: info.value }
            });
        }
    });
});

clearText

Specifies text for the context menu item that resets sorting settings for a column.

Type: String
Default Value: 'Clear Sorting'

In order to apply sorting to a column, a user calls a context menu by right-clicking the header of this column. Using this menu, the user can choose a sort order or reset sorting settings for this column. The text of the menu items can be customized using the ascendingText, descendingText and clearText options correspondingly.

Show Example:
jQuery

In this example, you can change the name of the context-menu item that resets sorting in a column. Type your text in the text box under the grid. After that, make the text box lose focus by clicking the surrounding area. The typed text will be assigned to the sorting | clearText option. To see the result of this alteration, right-click any column header.

<div id="gridContainer" style="height: 380px; max-width: 800px; margin: 0 auto"></div>
<div id="textBoxContainer" style="height: 45px; width: 280px; text-align: center"></div>
$(function () {
    $("#gridContainer").dxDataGrid({
        dataSource: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ],
        paging: { pageSize: 8 },
        sorting: { mode: 'multiple' }
    });

    $("#textBoxContainer").dxTextBox({
        placeholder: 'Type something here to change the sorting | clearText option',
        height: 40,
        width: 430,
        valueChangeAction: function (info) {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                sorting: { clearText: info.value }
            });
        }
    });
});

descendingText

Specifies text for the context menu item that sets a descending sort order in a column.

Type: String
Default Value: 'Sort Descending'

In order to apply sorting to a column, a user calls a context menu by right-clicking the header of this column. Usingthis menu, the user can choose a sort order or reset sorting settings for this column. The text of the menu items can be customized using the ascendingText, descendingText and clearText options correspondingly.

Show Example:
jQuery

In this example, you can change the name of the context-menu item that applies a descending sort order to a column. Type your text in the text box under the grid. After that, make the text box lose focus by clicking the surrounding area. The typed text will be assigned to the sorting | descendingText option. To see the result of this alteration, right-click any column header.

<div id="gridContainer" style="height: 380px; max-width: 800px; margin: 0 auto"></div>
<div id="textBoxContainer" style="height: 45px; width: 280px; text-align: center"></div>
$(function () {
    $("#gridContainer").dxDataGrid({
        dataSource: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ],
        paging: { pageSize: 8 },
        sorting: { mode: 'multiple' }
    });

    $("#textBoxContainer").dxTextBox({
        placeholder: 'Type something here to change the sorting | descendingText option',
        height: 40,
        width: 430,
        valueChangeAction: function (info) {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                sorting: { descendingText: info.value }
            });
        }
    });
});

mode

Specifies the runtime sorting mode.

Type: String
Default Value: 'single'
Accepted Values: 'none' | 'single' | 'multiple'

Sorting in the dxDataGrid widget can be carried out in a single or multiple mode. For a comprehensive overview of these modes, refer to the Single Mode or Multiple Mode articles.

If you must disable sorting, assign "none" to the mode option.

Show Example:
jQuery

In this example, you can spot the difference between the sorting modes provided by the dxDataGrid widget. Choose a required mode using the select box under the grid, and then click a column header. Note that in the multiple sorting mode, you can also right-click a column header to invoke a context menu that enables you to choose a sort order for the column.

<div id="gridContainer" style="height: 370px; max-width: 800px; margin: 0 auto"></div>
<div style="text-align: center; height: 38px; margin-top: 10px">
    Select a Sorting Mode:
    <div id="sortingModeSelectBox" style="display: inline-block; vertical-align: middle;"></div>
</div>
var sortingModes = ['none', 'single', 'multiple'];

$(function () {
    $("#gridContainer").dxDataGrid({
        dataSource: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        paging: { pageSize: 8 },
        sorting: { mode: 'single' }
    });

    $("#sortingModeSelectBox").dxSelectBox({
        height: 35,
        width: 150,
        items: sortingModes,
        value: sortingModes[1],
        valueChangeAction: function (info) {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                sorting: { mode: info.value }
            });
        }
    });
});