Can't add a new item in MultiSelect controller options list and selected list.

[Chuanlong]

Hi experts,

I'm using Kendo MultiSelect controller, I use MVVM design to bind this controller to a viewModel.
1. 
<select id="selectedCategories" style="width: 700px" data-role="multiselect" data-value-field="name" data-text-field="name" data-bind="source: selectedCategoryOptions, value: selectedCategory, events: { change: selectedCategoryChange }" />
2. 
var viewModel = kendo.observable({
        selectedCategory: [],
        selectedCategoryOptions: [],
});
3.
        var preCustomSubCategories = ["newItem1"];
        var selectedCategory = viewModel.selectedCategory;
        var selectedCategoryOptions = viewModel.selectedCategoryOptions;
        for (var i = 0; i < preCustomSubCategories.length; i++) {
            var item = { name: preCustomSubCategories[i] };
            if (!IsInCategoryArray(item, selectedCategory)) {
                selectedCategory.push(item);
            }
            if (!IsInCategoryArray(item, selectedCategoryOptions)) {
                selectedCategoryOptions.push(item);
            }
        }
        viewModel.set("selectedCategoryOptions", selectedCategoryOptions);
        viewModel.set("selectedCategory", selectedCategory);

If preCustomSubCategories item is exist in the options, it will be selected; but if preCustomSubCategories item is not exist in the options, it will be added to both options list and select list, but in the controller UI show nothing select. It's interesting that when i select a newItem2  again, the previous added newItem1 will show in controller UI, but newItem3 not show in controller UI.

[Georgi Krustev]

Hello Chuanlong,

I prepared a simple jsBin demo in my attempt to replicate the issue, but to no avail. One possible cause of this issue could be an invalid HTML. I noticed that the declared SELECT element does not have a closing tag, which is required. If the problem still persists  I will ask you to modify the demo in order to reproduce it. Thus I will be able to investigate it locally and advice you further.

Regards,
Georgi Krustev
Telerik

 

 

[Chuanlong]

Hi Georgi,

Thanks a lot for your comments, I have tried you demo, it works. So I compare my code to you carefully, you can see that I do the push item to "selected list" and "option list" in wrong order. I should push to "option list" first and then push to "selected list". I have resolved this issue, thank you again, your comments are really helpful~ 

 for (var i = 0; i < preCustomSubCategories.length; i++) {
            var item = { name: preCustomSubCategories[i] };
            if (!IsInCategoryArray(item, selectedCategory)) {
                selectedCategory.push(item);
            }
            if (!IsInCategoryArray(item, selectedCategoryOptions)) {
                selectedCategoryOptions.push(item);
            }
        }