sorting

Configures runtime sorting.

Type: Object

A user can sort rows by values of a single or multiple columns depending on the value of the sorting | mode option.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid Sorting

To apply sorting to a column, a user clicks its header or selects a command from the context menu.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid Sorting

View Demo

See Also
Show Example:
AngularJS
Knockout
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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

ascendingText

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

Type: String
Default Value: 'Sort Ascending'

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

clearText

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

Type: String
Default Value: 'Clear Sorting'

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

descendingText

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

Type: String
Default Value: 'Sort Descending'

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

mode

Specifies the sorting mode.

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

The following selection modes are available in the widget:

  • Single
    Rows can be sorted by values of a single column only.

  • Multiple
    Rows can be sorted by values of several columns.

When using the widget as an ASP.NET MVC Control, specify this option using the GridSortingMode enum. This enum accepts the following values: Single, Multiple and None.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can spot the difference between the sorting modes provided by the DataGrid 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.


                                    

                                    

In this example, you can spot the difference between the sorting modes provided by the DataGrid 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.


                                    

                                    

In this example, you can spot the difference between the sorting modes provided by the DataGrid 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.