Get EVERY selected item within a paginated multiselect grid with JavaScript

Kimamil · August 2016

From custom.js I try to collect all selected elements in a multi-select paginated grid. The standard Telerik select() method (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select) only returns all selected elements of the currently selected page (not mentioning what happens when filtering).

But somehow this "state" must be accessible, as changing pages reveals selected items on any other page.

So if anybody of you is lookin into this as well and can point out where the localStorage of this state can be found, or if you have a workaround for this, I'd be very happy to engage.

If you're interested, this is needed to 'finish' the "Order Summary" (https://blog.jhnr.ch/2016/07/04/advanced-cireson-service-manager-portal-customizations/) feature of my customizations.

Nicholas_Velich · August 2016

Perhaps you could briefly change the pagination of the grid to its max (500 out-of-box), get the data you need, and change it back?

Some of the code from this page should help with that: https://community.cireson.com/discussion/comment/839/#Comment_839

Kimamil · August 2016

Yeah, well... I tried that as a first approach but couldn't get it to work without the user noticing the grid changing in the frontend.

Also I think there should/must be a way to get around this without cloning the grid element etc. as the ui element itself can handle it as well ..

Manuel_Kammermann · October 2016

So here it comes, it is basically super easy ...

Every grid is placed within a <div> with the class 'k-grid'. Well, there you also have the data-attribute 'data-control-valuetargetid'. Its value actually points to a hidden input field residing just on top of that grid-div (duh! should have seen it earlier). This input actually holds the comma separated ids of all selected items for the respective grid.

However, this is not the id you can get from the dataSource.getByUid() method. So you have to get the item from the dataSrc itself. For example like this:

<code>jQuery('.k-grid');<br>var vTargetId = elem.data('control-valuetargetid');<br>var data = elem.data('kendoGrid').dataSource.data();
var items = $('#'+vTargetId).val().split(',');

items.forEach(function(itemId){
  var selItems = data.filter(function(dataItem){ return dataItem.Id === itemId; })
  if(selItems.length === 1){
    item.value.push(selItems[0]);
  }
  else{
    item.value.push.selItems;
  }
});
var elem =

With this I finally was able to fully realize an OrderSummary (Basically a ShoppingCart) for a SR - read more here: https://blog.jhnr.ch/2016/07/04/advanced-cireson-service-manager-portal-customizations/

Get EVERY selected item within a paginated multiselect grid with JavaScript

Answers

CIRESON COMMUNITY WEB SITE