Kendo UI (Multi Select Dropdown) - Change data values from External file

Question

I am using Kendo UI (Multi Select Dropdown) and I want to change the option values of it from external script file.

This is working as expected {Online DEMO} only if I am not initializing the Kendo feature in html page.

So, I have already options in html page:

My HTML Page:

    <select id="multiselect" multiple="multiple" class="mySelectBox">
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
    <select id="multiselect2" multiple="multiple">
      <option>Option 3</option>
      <option>Option 4</option>
    </select>

    <script language="Javascript">
      $("#multiselect, multiselect2").kendoMultiSelect();
    </script>

and trying to replace the values from external.js file as:

     var dataMultiselect = ["New Value 1", "New Value 2", "New Value 3"];
      $("#multiselect").kendoMultiSelect({
        dataSource: dataMultiselect
      });
      $("#multiselect2").kendoMultiSelect({
        dataSource: dataMultiselect
      });

It is not working... Any Help can save my day

Getting Error as "Uncaught TypeError: Cannot set property 'selected' of undefined"

Answer 1

You can change data values with function setDataSource

var data2 = ["Five", "Six"];
var multiselect = $("#multiselect").data("kendoMultiSelect");
multiselect.setDataSource(new kendo.data.DataSource({ data: data2 }));  

Dojo example