How to update Multiselect data?

[Vsevolod]

Hi!

I initialized a multiselect:

 let kendoMultiSelect = $("#multisel").kendoMultiSelect({
     dataSource: ['item1'],
     value: ['item1'],
     autoClose: false
 }).data("kendoMultiSelect");

 

and function of refresh multiselect data:

$.ajax({
     url: myUrl,
     type: "POST",
     data: window.kendo.stringify({ objId: that.objId }),
     contentType: "application/json",
     cache: false,
     async: true,
     success: function (response) { //response - array (for example: ['new1', 'new2', ...])
         let widget =  $("#multisel").getKendoMultiSelect();
         widget.dataSource = response;
         widget.value = response; //I need all the data to be selected at once
     }
 });

After success query the multiselect did not update.

When I try to open the multiselect dropdown I get an error: "TypeError: this.dataSource.flatView is not a function"

How can I update the multiselect.

[Neli]

Hi Vsevolod, 

You could use the setDataSource method to set the new DataSource to the component:

- https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/methods/setdatasource

  success: function (response) { 
          console.log(response)
          let widget =  $("#multisel").getKendoMultiSelect();
          widget.setDataSource(response)
          widget.value(response[5].ProductID)
}

Here is such Dojo example - https://dojo.telerik.com/@NeliK/uVALAxiz.

Note, that you could also initialize the MultiSelect component and call the ajax request in the transport.read function as demonstrated in the third example in the link below:

- https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read

Regards,

Neli