There is an issue with Value method when remove an option

2 posts, 0 answers
  1. Tomas
    Tomas avatar
    11 posts
    Member since:
    Apr 2013

    Posted 23 Apr Link to this post

    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?

     

  2. Neli
    Admin
    Neli avatar
    208 posts

    Posted 24 Apr Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top