CODEWITHSUNDEEP
angularjskendo-uiodatamulti-select
Rolf Wessels
Rolf Wessels

Reputation: 847

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

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

Upvotes: 1

Views: 2256

Answers (2)

Jigarius
Jigarius

Reputation: 416

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.

Upvotes: 2

Alex Wolfe
Alex Wolfe

Reputation: 101

When using Kendo with Angular, you want to use the k-rebind attribute to refresh the pulldown options + update the picker with the values in your $scope.countries object when it changes.

If you want like the picker to update when $scope.products changes as well, you can initialize the picker using a k-options attr pointed to an object in your controller, and set the k-rebind to that object.

This kendo tutorial provides a useful example, also using odata paging. http://docs.telerik.com/kendo-ui/web/multiselect/how-to/AngularJS/pre-select-items

Upvotes: 2

Related Questions