如何刷新KendoUI DropDownList？

Question

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?

Answer 1

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);    

    }
});