selection

Specifies options of runtime selection.

Type: Object

DataGrid provides users with the capability of selecting grid records at runtime. End-users can perform selection in a single or multiple mode. To specify the required mode, use the mode property of the selection configuration object. You can disable selection completely using the same property.

When the multiple selection mode is specified, a user is capable of selecting all grid records at once using the main check box or the CTRL + A shortcut. To disable this feature, set the allowSelectAll option to false.

Furthermore, you can perform specific actions when a grid record has been selected/deselected. For additional information, refer to the onSelectionChanged option description.

See Also

View Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, you can select multiple records in a grid. This feature is enabled by setting the selection | mode option to "multiple". However, you cannot select all records at once as the allowSelectAll option is set to false.


                                    

                                    

In this example, you can select multiple records in a grid. This feature is enabled by setting the selection | mode option to "multiple". However, you cannot select all records at once as the allowSelectAll option is set to false.


                                    

                                    

In this example, you can select multiple records in a grid. This feature is enabled by setting the selection | mode option to "multiple". However, you cannot select all records at once as the allowSelectAll option is set to false.


                                    

                                    

allowSelectAll

Specifies whether the user can select all grid records at once.

Type: Boolean
Default Value: true

In multiple selection mode, several records can be selected in the DataGrid at runtime. Additionally, the DataGrid provides the capability for a user to select all grid records at once. For this purpose, you can use the CTRL + A shortcut or the check box located in the header of the selection column. To disable this capability, set the allowSelectAll option to false. In this case, a click on the check box does not select all records, but still allows clearing the selection.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the selection | allowSelectAll option by toggling the check box under the grid. When this option is true, you can select all grid records at once using the check box in the header of the selection column. When the aforementioned option is false, this check box can be used only to deselect all records.


                                    

                                    

In this example, you can change the value of the selection | allowSelectAll option by toggling the check box under the grid. When this option is true, you can select all grid records at once using the check box in the header of the selection column. When the aforementioned option is false, this check box can be used only to deselect all records.


                                    

                                    

In this example, you can change the value of the selection | allowSelectAll option by toggling the check box under the grid. When this option is true, you can select all grid records at once using the check box in the header of the selection column. When the aforementioned option is false, this check box can be used only to deselect all records.


                                    

                                    

deferred

Makes selection deferred.

Type: Boolean
Default Value: false

Consider making selection deferred if the widget needs to operate a large volume of data and the user is allowed to select all rows at once. Unlike usual (or "instant") selection, in the case of deferred selection, the widget requests data only when you demand this using the API, for example, when the getSelectedRowsData() or getSelectedRowKeys() method is called. This mode has certain specifics that determine the API you need to use. For more information, see the Deferred Selection article.

NOTE
Deferred selection is unsupported when selectAllMode is 'page'.

View Demo

mode

Specifies the selection mode.

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

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

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the SelectionMode enum. This enum accepts the following values: None, Single and Multiple.

View Row Selection Demo View Multiple Row Selection Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, you can spot the difference between the selection modes provided by the DataGrid widget. Choose a required mode using the select box under the grid, and then click one or several grid records. Data for this example is obtained from www.odata.org.


                                    

                                    

In this example, you can spot the difference between the selection modes provided by the DataGrid widget. Choose a required mode using the select box under the grid, and then click one or several grid records. Data for this example is obtained from www.odata.org.


                                    

                                    

In this example, you can spot the difference between the selection modes provided by the DataGrid widget. Choose a required mode using the select box under the grid, and then click one or several grid records. Data for this example is obtained from www.odata.org.


                                    

                                    

selectAllMode

Specifies the mode in which all the records are selected. Applies only if selection | allowSelectAll is true.

Type: String
Default Value: 'allPages'
Accepted Values: 'page' | 'allPages'

This option specifies how records should be selected on clicking the "Select All" check box and by calling the selectAll()/deselectAll() methods. The following modes are available.

  • 'page'
    Selects records on currently rendered pages.

    NOTE
    This mode is incompatible with deferred selection.
  • 'allPages'
    Selects records on all pages.

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the SelectAllMode enum. This enum accepts the following values: Page and AllPages.

View Demo

showCheckBoxesMode

Specifies the checkbox row display policy in the multiple mode.

Type: String
Default Value: 'onClick'
Accepted Values: 'onClick' | 'onLongTap' | 'always' | 'none'

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the GridSelectionShowCheckBoxesMode enum. This enum accepts the following values: OnClick, OnLongTap, Always and None.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can spot the difference between the checkbox row display policies provided by the DataGrid widget. Choose the required policy using the select box under the grid, and then click one or several grid records. Data for this example is obtained from www.odata.org.


                                    

                                    

In this example, you can spot the difference between the checkbox row display policies provided by the DataGrid widget. Choose the required policy using the select box under the grid, and then click one or several grid records. Data for this example is obtained from www.odata.org.


                                    

                                    

In this example, you can spot the difference between the checkbox row display policies provided by the DataGrid widget. Choose the required policy using the select box under the grid, and then click one or several grid records. Data for this example is obtained from www.odata.org.