Grid - Remotely Bound - Multiple Row Select - Paging

[Anton]

We are keen on making use of Kendo's grid (using ASP.NET MVC Kendo Web controls)
 but need to know how multiple selection of rows can be achieved (if possible) when the grid is bound to a remote data source (web service) and paging is in place.

Below is the functionality we require:

1. Retrieve large result sets (via the web service) ranging from 1 to 6000+
2. Filter the retrieved result set
3. Sort on certain columns
4. After sorting users must be able to multiple select certain rows, and...
5. The selection state of each row must be bound to a checkbox in the 1st column
6. Row selection (check boxes) must persist across pages (paging - checkboxes remain checked during paging operations - forward and backward) 
7. Users must also be able to select all records e.g. an "all" checkbox in the grids header

We have been able to comply to all our requirements other than to points  5, 6 and 7 but they are all related.
 
Do we have to maintain the selected state ourselves (i.e. build a list of some sort and then update the grid) or is the grid capable of doing it by itself even when remotely bound? What is the best way to approach this if we have to do it ourselves? Using the dataset etc. etc.?

Any assistance or pointing in the right direction will be appreciated

[Atanas Korchev]

Hello Andrew,

Such selection isn't supported as a built-in feature and requires a custom implementation. I created a sample demo here: http://jsbin.com/AgOgudoJ/1/edit

It creates a template column for the checkbox and stores the selected item id in a variable.

$("#grid").on("change", ":checkbox", function(e) {
  var checkbox = e.currentTarget;

  // store the value of the checkbox (bound to the OrderID field)
  orders[checkbox.value] = checkbox.checked;

  // toggle selected state of the parent table row
  $(checkbox).closest("tr").toggleClass("k-state-selected", checkbox.checked);

});

When the page is changed it tries to restore any selected rows in this page (in the dataBound event handler).

dataBound: function() {
  // restore selected items
  for (var orderId in orders) {
    // continue if not selected
    if (!orders[orderId]) {
      continue;
    }

    // find selected item by its id (the OrderID field)
    var order = this.dataSource.get(orderId);

    if (order) {
      // find corresponding table row and set its selected class
      this.tbody.find("[data-uid=" + order.uid + "]").addClass("k-state-selected").find(":checkbox").attr("checked", true);
    }
  }
}

Regards,
Atanas Korchev
Telerik

[Anton]

Thank you for the prompt response Atanas together with the demo application.
You have answered our question - much appreciated.

Season's Greetings

[Fabian]

Just saw this post and I am trying to something similar. I see it working in this link:

http://jsbin.com/AgOgudoJ/1/edit

I have a question:

how does the orders object get populated after it's created?

        var orders = {};

Thanks,

 

Fabian

 

[Stefan]

Hello Fabian,

This is the line in the code which is adding items to the orders variable:

orders[checkbox.value] = checkbox.checked;

Also, we have an example demonstrating a similar approach for persisting row selection, but it is without a checkbox column:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/persist-row-selection-while-paging

Let me know if you need additional information on this matter.

Regards,
Stefan
Telerik by Progress

[Rakesh]

How to solve point 7 ? can someone guide here ?

[Martin]

Please refer to the Checkbox Selection demo.