Configuration selection

Specifies options of runtime selection.

Type: Object

dxDataGrid 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 selectionChanged option description.

See Also

For a structured overview of dxDataGrid selection capabilities, see the Selection article.

Show Example:
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.

<div id="gridContainer" style="height:380px; max-width:800px; margin: 0 auto"></div>
var selectionModes = ['none', 'single', 'multiple'];

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

allowSelectAll

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

Type: Boolean
Default Value: true

In a multiple selection mode, several records can be selected in a grid at runtime. Additionally, dxDataGrid provides a capability for the user to select all grid records at once. For this purpose, he or she can use the CTRL + A shortcut or a check box located in the header of the selection column. To disable this capability, set the allowSelectAll option to false.

Show Example:
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.

<div id="gridContainer" style="height:380px; max-width:800px; margin: 0 auto"></div>
<div style="text-align:center"><span id="allowSelectAllCheckbox"></span> Allow the Selection of All Records</div>
$(function () {
    $("#gridContainer").dxDataGrid({
        dataSource: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        paging: { pageSize: 8 },
        selection: { mode: 'multiple' }
    });

    $("#allowSelectAllCheckbox").dxCheckBox({
        value: true,
        height: 14,
        width: 14,
        valueChangeAction: function (info) {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                selection: { allowSelectAll: info.value }
            });
        }
    });
});

mode

Specifies the selection mode.

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

Selection 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 and Multiple Mode articles.

Show Example:
jQuery

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

<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 Selection Mode:
    <div id="selectionModeSelectBox" style="display: inline-block; vertical-align: middle;"></div>
</div>
var selectionModes = ['none', 'single', 'multiple'];

$(function () {
    $("#gridContainer").dxDataGrid({
        dataSource: {
            store: {
                type: 'odata',
                jsonp: true,
                url: 'http://services.odata.org/v2/Northwind/Northwind.svc/Orders'
            }
        },
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ],
        paging: { pageSize: 8 },
        selection: { mode: 'none' }
    });

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