This is a migrated thread and some comments may be shown as answers.

Grid - Remotely Bound - Multiple Row Select - Paging

4 Answers 156 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anton
Top achievements
Rank 1
Anton asked on 19 Dec 2013, 12:36 PM
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

4 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 19 Dec 2013, 02:31 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anton
Top achievements
Rank 1
answered on 20 Dec 2013, 09:53 AM
Thank you for the prompt response Atanas together with the demo application.
You have answered our question - much appreciated.

Season's Greetings
0
Fabian
Top achievements
Rank 1
answered on 30 Nov 2016, 03:05 PM

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

 

0
Stefan
Telerik team
answered on 02 Dec 2016, 11:25 AM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Tags
Grid
Asked by
Anton
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Anton
Top achievements
Rank 1
Fabian
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or