3

I having this weird problem with kendo multiselect.

<input id="addTags" /><br>
<input type="button" onclick="fillaList();" value="fill List" />
<input type="button" onclick="clearList();" value="Init List" />

var list=[{label:'tag1', value:'1'},
         {label:'tag9', value:'9'},
         {label:'tag8', value:'8'},
         {label:'tag7', value:'7'},
         {label:'tag6', value:'6'},
         {label:'tag5', value:'5'},
         {label:'tag4', value:'4'},
         {label:'tag3', value:'3'},
         {label:'tag2', value:'2'}];

function fillData(tagIds){ 

    var tagObj = $("#addTags").data("kendoMultiSelect");
    if (tagObj == undefined) { // if not loaded
        $("#addTags").kendoMultiSelect({
            dataTextField: "label",
            dataValueField: "value",
            dataSource: list,
            value: tagIds, placeholder: "Select from list",
            change: function() {
                // change
            }
        });
    } else { // if already loaded only change the values.
        tagObj.value(tagIds);
        console.log(tagIds);
        console.log(tagObj.value());
    }
}
function fillaList(){
    var tagIds=[1,2,3];
    fillData(tagIds);
}
function clearList(){
    fillData([]);
}

http://jsfiddle.net/ruchan/AgV52/1/

Problem Replication

  • click "Init List" and then add new tag to the box by keyboard.

  • now click fill List button. all The values are not being selected. or sometimes only 1 is selected

this problem is not there when selecting by mouse.

I tested in Chrome v32.0.1700.107 m

Ruchan
  • 3,124
  • 7
  • 36
  • 72
  • I tested and can't see any problem. would you please explain what exactly you want to be happen and what instead happens? – Iman Mahmoudinasab Feb 25 '14 at 10:57
  • ok. first check what happens when you click the "Init List" then "fill List" buttons respectively. Init list initializes the kendomultibox and fill list fills with 3 tags with value 1,2,3. but when you do as shown in problem Replication with "Keyboard" dont use mouse, then the values are not shown... i have tested it in both chrome and firefox it and i can replicate it. – Ruchan Feb 25 '14 at 11:03
  • i would do that, but i can't say everyone to use spacebar instead of enter, isn't it? any other way to solve it would help. plus just realised, can't use `spacebar` to select :p – Ruchan Feb 25 '14 at 11:36

1 Answers1

4

Before setting new values in a multiselect, you should clean the filter before tagObj.dataSource.filter({});

Your function should be:

function fillData(tagIds){ 

    var tagObj = $("#addTags").data("kendoMultiSelect");
    if (tagObj == undefined) { // if not loaded
        $("#addTags").kendoMultiSelect({
            dataTextField: "label",
            dataValueField: "value",
            dataSource: list,
            value: tagIds, placeholder: "Select from list",
            change: function() {
                // change
            }
        });
    } else { // if already loaded only change the values.
        // Clean DataSource filter before setting new values
        tagObj.dataSource.filter({});
        tagObj.value(tagIds);
        console.log(tagIds);
        console.log(tagObj.value());
    }
}

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/AgV52/2/

OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • thanks this works. But still looks like a bug on part of kendo. – Ruchan Feb 25 '14 at 12:06
  • Has to do with how KendoUI filters the options already chosen to do not show them again. – OnaBai Feb 25 '14 at 14:27
  • still no fix from kendo i think, still encounter this problem today. i thought i forget to put something/or something wrong with my code. turn out i need to empty the filter. thanks – himawan_r Aug 19 '16 at 02:35