There is an issue with Value method when remove an option

[Tomas]

Hi, I have the next code 

HTML

<input id="dropdownlist" />

 

JAVACRIPT

$("#dropdownlist").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        {text:"None",       value:"Fruits"},
        {text:"Apples",     value:"Apples"},
        {text:"Oranges",    value:"Oranges"},
        {text:"Lechus",     value:"Lechus"},
        {text:"Carrot",     value:"Carrot"}
    ]
});

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");

dropdownlist.value("Fruits");
dropdownlist.value("Carrot");
removeItem(dropdownlist, "Oranges");
dropdownlist.value("Lechus");

function removeItem(dropdownlist, value){
    var items = dropdownlist.dataSource.data();
    var foundItem = {};
    var i;

    for (i = 0; i < items.length; i++) {
        if (items[i].value == value) {
            foundItem = items[i];
            break;
        }
    }
    if (foundItem) {
        dropdownlist.dataSource.remove(foundItem);
    }
}

 

If you run, the dropdown list has a issue, two options are selected.

If you comment code line removeItem(dropdownlist, "Oranges"); works well, I think that Remove method of dataSource is the problem.

I tested in DOJO with all versions but the problem is no solved.

Could are you tell me why does that occur ?  and How could I solved this problem?

 

[Neli]

Hello Tomas,

After an item is removed you could refresh the DropDownList. Thus, the data will be rebound and the correct value will be selected. 

dropdownlist.refresh();

Another option is instead of refresh() method, to trigger the 'change' event.

dropdownlist.dataSource.trigger("change");

Here is a Dojo example where refresh method is called and the DropDownList is populated correctly.

Regards,
Neli
Progress Telerik