Kendo multiselect populate previously selected items using odata with paging. (AngularJS)

Question

I'm using the kendo MultiSelect with odata paging and using the angularJS integration. Populating the data from scratch works great. When I want to re-populate the data from initial data then I seem to have a problem.

Cause of the problem: The data only gets populate from the initial or previous dataset. So, if I the paging size is 10 then only products that exist in the first page will be displayed as normal. All product that don't fall within the first page will just not be displayed.

Possible workarounds:

1. Increase the page size. I have used this on other pages where the results are quite small. However this is not a realistic work around as we are expecting much bigger datasets in the future ( hence using odata in the first place)
2. Was thinking we could possibly do some sort of initial sorting. However this could also be slow and could still be a problem if there were more items selected than exist in the first page.

Ideal solution

Is there a way to tell kendo component to load all data based on current value? This will then build the required odata call and populate the component.

Example of the current issue: http://dojo.telerik.com/ODaLe/2

Answer 1

I worked 2-4 hours to find a solution for this. Dunno if yall would like it, but it might help somebody, so I'd type it here. Following are the steps:

Step 1: Create the data source

First, setup the dataSource object which you would be using for reading remote data (for offline data, improvise by reading the API).

var dataSource = new kendo.data.DataSource({
  dataType: "jsonp",
  transport: {
    read: {
      url: options.source,
      type: 'POST'
    },
  },
  serverFiltering: true
});

Step 2: Load the selected items

This can be tricky as you need to have the selected item IDs on the client side. For me, I did it by adding a data-options-selected="1;3;9" attribute to my select element. Later, in my JavaScript, I split this attribute by ";" and retrieve an array of selected IDs. Lets say these values are in var valuesArray;

Once we have an array of selected IDs, we need to read them from the data-source. In my case, it was remote, so I ran a dataSource.read() with filters as under:

dataSource.read({
        filter: {
            logic: 'and',
            filters: [
                {
                    field: options.dataValueField,
                    operator: 'equals',
                    value: options.value
                }
            ]
        }
});

On the server side, this should return an array containing the items having the given identifiers. Thus, we now have those items on the client-side as well.

Step 3: Set values for the widget

Now that the value related data is loaded, we can set the values for the widget using the values() method. Here, $el is the jQuery object representing the select element which I was using for multiSelect.

var oWidget = $el.data('kendoMultiSelect'); oWidget.value(valuesArray);

That's it! One multiselect widget pre-loaded with values, ready to rock and roll. Served my purpose. Dunno if any short-cuts exist.