How to update DropDownList KendoUI list?

Question

I have a kendo ui grid that I need to update. So, I have the following marking:

I call the following script to populate the dropdown:

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

After loading the page. I call the same script to update the dropdown. I noticed in the source that the data source contains 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 kendo DropDownList only once, and every time you want to update data, you must use dataSource.data () .

Sort of:

 $('#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); } });