CODEWITHSUNDEEP
javascriptasp.net-mvctelerikkendo-ui
Rodney Hickman
Rodney Hickman

Reputation: 3133

How to refresh a KendoUI DropDownList?

I have a kendo ui grid that i need to update. So I have the following Mark-up:

I call the following script to populate the dropdownlist: 

   // An Ajax call to load the selected hover into the controls
    $.ajax({
        type: 'POST',
        url: '/Reports/HoverManager/GetHoversForDropDown',
        data: { sectionId: sectionId },
        error: function(response){
            $('.hover-manager .error').html(response.responseText).fadeIn(500).delay(5000).fadeOut(500);
        },
        success: function(response){

            $('.hover-manager #hoverSelect').kendoDropDownList({  
                animation: false,
                dataTextField: "Name",
                dataValueField: "ID",
                dataSource: response.hovers,
                change: hoverDownDownChange,
            }).data('kendoDropDownList').value(hoverId);    

        }
    });

Once the page loads. I call the same script to refresh the Drop Down List. I've noticed in the source that the data source contains the new data but the drop down list is hidden.

What is the correct way to update the Kendo Drop Down List?

Upvotes: 4

Views: 12871

Answers (1)

Petur Subev
Petur Subev

Reputation: 20233

You need to initialize the kendo DropDownList only once and each time you want to refresh the data you should use the dataSource.data() method.

Something like :

$('#hoverSelect').kendoDropDownList({  
            animation: false,
            dataTextField: "Name",
            dataValueField: "ID",                
            change: hoverDownDownChange,
        }).data('kendoDropDownList').value(hoverId); 

$.ajax({
    type: 'POST',
    url: '/Reports/HoverManager/GetHoversForDropDown',
    data: { sectionId: sectionId },
    error: function(response){
        $('.hover-manager .error').html(response.responseText).fadeIn(500).delay(5000).fadeOut(500);
    },        success: function(response){

        $('#hoverSelect').data('kendoDropDownList').dataSource.data(response.hovers);    

    }
});

Upvotes: 7

Related Questions