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.

    View Demo

    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:390px; max-width:630px; 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:
    AngularJS
    Knockout
    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 style="height:450px" ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin:0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            sorting: { mode: 'multiple' },
            bindingOptions: {
                'sorting.ascendingText': 'ascendingText'
            }
        }"></div>
        <div style="width:300px; margin:0 auto;" dx-text-box="{
            placeholder: 'Enter a value of the ascendingText option',
            valueChangeEvent: 'keyup',
            height: 40,
            width: 300,
            bindingOptions: {
                value: 'ascendingText'
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ];
        $scope.ascendingText = null;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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 style="height:390px; max-width:630px; margin:0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        sorting: {
            mode: 'multiple',
            ascendingText: ascendingText
        }
    }"></div>
    <div style="width:300px; margin:0 auto" data-bind="dxTextBox: {
        placeholder: 'Enter a value of the ascendingText option',
        valueChangeEvent: 'keyup',
        height: 40,
        width: 300,
        value: ascendingText
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ],
        ascendingText: ko.observable()
    }
    ko.applyBindings(myViewModel);
    

    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: 630px; margin: 0 auto"></div>
    <div id="textBoxContainer" style="height: 45px; width: 280px; margin:0 auto"></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: 'Enter a value of the ascendingText option',
            valueChangeEvent: 'keyup',
            height: 40,
            width: 300,
            onValueChanged: 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:
    AngularJS
    Knockout
    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 style="height:450px" ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin:0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            sorting: { mode: 'multiple' },
            bindingOptions: {
                'sorting.clearText': 'clearText'
            }
        }"></div>
        <div style="width:300px; margin:0 auto;" dx-text-box="{
            placeholder: 'Enter a value of the clearText option',
            valueChangeEvent: 'keyup',
            height: 40,
            width: 300,
            bindingOptions: {
                value: 'clearText'
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ];
        $scope.clearText = null;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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 style="height:390px; max-width:630px; margin:0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        sorting: {
            mode: 'multiple',
            clearText: clearText
        }
    }"></div>
    <div style="width:300px; margin:0 auto" data-bind="dxTextBox: {
        placeholder: 'Enter a value of the clearText option',
        valueChangeEvent: 'keyup',
        height: 40,
        width: 300,
        value: clearText
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ],
        clearText: ko.observable()
    }
    ko.applyBindings(myViewModel);
    

    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: 630px; margin: 0 auto"></div>
    <div id="textBoxContainer" style="height: 45px; width: 280px; margin:0 auto"></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: 'Enter a value of the clearText option',
            valueChangeEvent: 'keyup',
            height: 40,
            width: 300,
            onValueChanged: 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:
    AngularJS
    Knockout
    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 style="height:450px" ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin:0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            sorting: { mode: 'multiple' },
            bindingOptions: {
                'sorting.descendingText': 'descendingText'
            }
        }"></div>
        <div style="width:300px; margin:0 auto;" dx-text-box="{
            placeholder: 'Enter a value of the descendingText option',
            valueChangeEvent: 'keyup',
            height: 40,
            width: 300,
            bindingOptions: {
                value: 'descendingText'
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ];
        $scope.descendingText = null;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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 style="height:390px; max-width:630px; margin:0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        sorting: {
            mode: 'multiple',
            descendingText: descendingText
        }
    }"></div>
    <div style="width:300px; margin:0 auto" data-bind="dxTextBox: {
        placeholder: 'Enter a value of the descendingText option',
        valueChangeEvent: 'keyup',
        height: 40,
        width: 300,
        value: descendingText
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ],
        descendingText: ko.observable()
    }
    ko.applyBindings(myViewModel);
    

    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: 630px; margin: 0 auto"></div>
    <div id="textBoxContainer" style="height: 45px; width: 280px; margin:0 auto"></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: 'Enter a value of the descendingText option',
            valueChangeEvent: 'keyup',
            height: 40,
            width: 300,
            onValueChanged: 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:
    AngularJS
    Knockout
    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 ng-controller="demoController" style="text-align:center; height:500px; max-width:800px; margin: 0 auto">
        <div style="height:500px; width:800px">
            <div style="max-height:450px" dx-data-grid="{
                dataSource: books,
                columns: columns,
                paging: { pageSize: 8 },
                bindingOptions: {
                    'sorting.mode': 'sortingMode'
                }
            }"></div>
            <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
                <div style="display:table-cell;vertical-align:middle">Select a Sorting Mode:&nbsp;</div>
                <div style="display:table-cell;width:150px" dx-select-box="{
                    items: sortingModes,
                    bindingOptions: {
                        value: 'sortingMode'
                    }
                }"></div>
            </div>
        </div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
        $scope.sortingModes = ['none', 'single', 'multiple'];
        $scope.sortingMode = 'single';
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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 style="text-align:center;height:500px; width:800px; margin: 0 auto">
        <div style="max-height:450px" data-bind="dxDataGrid: {
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            sorting: { mode: sortingMode }
        }"></div>
        <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
            <div style="display:table-cell;vertical-align:middle">Select a Sorting Mode:&nbsp;</div>
            <div style="display:table-cell;width:150px" data-bind="dxSelectBox: {
                items: sortingModes,
                value: sortingMode
            }"></div>
        </div>
    </div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        sortingModes: ['none', 'single', 'multiple'],
        sortingMode: ko.observable('single')
    }
    ko.applyBindings(myViewModel);
    

    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 style="text-align:center;height:500px; width:800px; margin: 0 auto">
        <div id="gridContainer" style="max-height:450px"></div>
        <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
            <div style="display:table-cell;vertical-align:middle">Select a Sorting Mode:&nbsp;</div>
            <div style="display:table-cell;width:150px" id="selectBoxContainer"></div>
        </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' }
        });
    
        $("#selectBoxContainer").dxSelectBox({
            height: 35,
            width: 150,
            items: sortingModes,
            value: sortingModes[1],
            onValueChanged: function (info) {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.option({
                    sorting: { mode: info.value }
                });
            }
        });
    });