Kendo UI-многозначная замена динамически создаваемого источника данных из внешнего файла

Как я могу заменить значения источника данных Kendo UI MultiSelect из внешнего .файл js...

PS : фактические значения поступают из файла index.html, как показано ниже:

Индекс.html 

<select multiple="multiple" class="city_fields initi-select-218" id="test">
</select>

var data = [
     "New Jersey",
     "San Francisco",
     "Las Vegas",
     "Chicago",
     "Los Angeles",
     "New York"
];

jQuery(".city_fields").kendoMultiSelect({
  dataSource: data,
  filter: "contains",
});

Вышеуказанные значения я пытаюсь заменить из init.JS (внешний) файл, как показано ниже...

Инит.js

Пробовал Вариант 1:

var newData = ["Delhi",  "Bangalore"];
jQuery(".initi-select-218").kendoMultiSelect({
    dataSource: newData,
    filter: "contains",
    placeholder: "Select",
});

Пробовал Вариант 2:

var newData = ["Delhi", "Bangalore"];
$("#test").kendoMultiSelect({
    dataSource: newData,
    filter: "contains",
    placeholder: "Select",
}); 
$("#test").setDataSource(new kendo.data.DataSource({ data: newData }));

Пробовал Вариант 3:

var newData = ["Delhi",  "Bangalore"];
var multiselect = $("#test").data("kendoMultiSelect");
multiselect.setDataSource(new kendo.data.DataSource({ data: newData }));

Для Варианта 2 & 3, я получаю ошибку как

Uncaught TypeError: $(...).setDataSource is not a function...

Но все равно, он берет значения из файла index.html

1 2
jquery kendo-ui

1 ответ:

Это потому, что у вас есть селектор jquery по классу css. kendo multiselect применяет те же классы и к оболочке.

<div class="k-widget k-multiselect k-header city_fields initi-select-218" unselectable="on" title="" style="">
    ...
    <select multiple="multiple" class="city_fields initi-select-218" data-role="multiselect" aria-disabled="false" aria-readonly="false" style="display: none;">
        ...
    </select>
</div>

Вместо этого используйте атрибут id: 

<select id="multiselect" multiple="multiple" class="city_fields initi-select-218"></select>
<script>
    $("#multiselect").kendoMultiSelect({...});
    var multiselect = $("#multiselect").data("kendoMultiSelect");
    ...
</script>

Обновление рабочий пример: http://dojo.telerik.com/iHoDU/2

1