Deferred Selection

When you have a large amount of remote data and need to enable a user to select all grid rows at once, consider using selection in the deferred mode. In this mode, the DataGrid does not make requests for data until this is demanded from the API, for example, until the getSelectedRowsData() or getSelectedRowKeys() method is called. To switch selection to the deferred mode, assign true to the selection | deferred option.

JavaScript
$(function(){
    $("#gridContainer").dxDataGrid({
        // ...
        dataSource: {
            store: {
                type: "odata",
                url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
                key: "Product_ID"
            }
        },
        selection: {
            mode: 'multiple',
            allowSelectAll: true,
            deferred: true
        }
    }); 
});

NOTE: We strongly recommend specifying the key property for data to ensure that selection will work properly.

There are certain differences between selection in the deferred and in the usual, instant, mode. These differences consider the API you use with each of these modes.

  • Setting initial selection

    To set the initially selected rows, use the selectionFilter instead of the selectedRowKeys option. Pass a filter expression to define the records that must be selected.

    JavaScript
    $(function () {
        $("#gridContainer").dxDataGrid({
            // ...
            selectionFilter: ["Task_Status", "=", "Completed"]
        });
    });

    Each time a user selects a row, the DataGrid changes the value of the selectionFilter option internally. You can use the following code to obtain the current value of this option and send it to the server for later processing.

    JavaScript
    function sendSelectedRows() {
        var selectionFilter = dataGridInstance.option("selectionFilter");
        $.ajax({
            method: "POST",
            url: "url/to/data/processing/method",
            data: { 
                filter: (selectionFilter ? JSON.stringify(selectionFilter) : null)
            }
        });
    }
  • Checking whether a row is selected

    To find out whether or not a specific row is selected, use the isRowSelected(data) method.

  • Getting data of the selected rows

    The getSelectedRowsData() and getSelectedRowKeys() methods return a Promise of the jQuery.Deferred object that should be resolved.

View Demo