preload the selected values of a kendo multiselect that using a server bound data source and templated tags - initialization

Question

I have a kendo multiselect as follows.
$("#tags").kendoMultiSelect({
change: onChange,
dataSource: {
transport: {
prefix: "",
read: {
url: "/OpsManager/Api/Activity/SearchResourcesTagged",
data: getSubmitData
}
},
serverFiltering: true,
filter: [],
schema: { errors: "Errors" }
},
itemTemplate: $('#resourceItemTemplate').html(),
tagTemplate: $('#resourceTagTemplate').html(),
dataValueField: "k",
value: [{"k":"[109]","n":"All Open Alerts","icon":"!","all":105}]
});
with the following templates:
<script id="resourceItemTemplate" type="text/x-kendo-template">
<span data-icon="#:data.icon#" class="#: data.s || '' #"> #:data.n #</span>
# if (data.d) { #
<div class="details">#: data.d #</div>
# } #
# if (data.details) { #
<div class="details k-state-disabled">
# for (var v in data.details) {
var t = typeof data.details[v];
if (t != "object" && t != "function" && v != "uid") { #
<div class="k-button">#: v #: #: data.details[v] #</div>
# } } #
</div>
# } #
</script>
<script id="resourceTagTemplate" type="text/x-kendo-template">
<span data-icon="#:data.icon#" class="tag-content #: data.s || '' #"> #:data.n #</span>
</script>
<select id="tags" multiple="multiple" name="tags"></select>
I'm trying to preload a specific selection and I can't seem to get it to work.
selection:
[{"k":"[109]","n":"All Open Alerts","icon":"!","all":105}]
I've put the initialized value in place according to their documentation and looking the multiselect object up inside the browser I see the passed in object inside _initialValues but I don't see anything inside _dataItems or in the tag list on the ui.
Any clues how to get this working?

Answer 1

Thanks to #OnaBai,
The problem is a difference in expected content of the datasources. The datasource originally loaded is not looking for "[109]" but rather "some string query" and then provides a specific list around that search. Thus I need to initialize a fake datasource for the control and then immediately switch out the data source for the dynamic one.
$("#tags").kendoMultiSelect({
change: onChange,
dataSource: {
transport : {
read: function (op) {
op.success([{"k":"[109]","n":"All Open Alerts","icon":"!","all":105}]);
}
}
},
itemTemplate: $('#resourceItemTemplate').html(),
tagTemplate: $('#resourceTagTemplate').html(),
dataValueField: "k",
value: ["[109]"]
});
$("#tags").data("kendoMultiSelect").setDataSource({
transport: {
read: {
url: "OpsManager/Api/Activity/SearchResourcesTagged",
data: getSubmitData
}
},
serverFiltering: true,
filter: [],
schema: { errors: "Errors" }
});
after that it works exactly like expected.

Answer 2

Two problems:
Define value in multiselect and not in dataSource.
Set value to an array with the list of key values that you want to initially load (in your case just "[109]").
Something like:
$("#tags").kendoMultiSelect({
change: onChange,
dataSource: {
transport: {
prefix: "",
read: {
url: "/OpsManager/Api/Activity/SearchResourcesTagged",
data: getSubmitData
}
},
serverFiltering: true,
filter: [],
schema: { errors: "Errors" }
},
itemTemplate: $('#resourceItemTemplate').html(),
tagTemplate: $('#resourceTagTemplate').html(),
dataValueField: "k",
value: ["[109]"]
});
Example in here