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

3 posts, 0 answers
  1. Chuanlong
    Chuanlong  avatar
    12 posts
    Member since:
    Nov 2013

    Posted 26 Mar 2014 Link to this post

    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.


















  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 31 Mar 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Chuanlong
    Chuanlong  avatar
    12 posts
    Member since:
    Nov 2013

    Posted 31 Mar 2014 in reply to Georgi Krustev Link to this post

    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);
                }
            }
Back to Top