Binding Data to combobox after ajax call using mvvm

[Dinesh]

Hi,

I am using MVVM Framework

var indexViewModel = kendo.observable({
StatesList: statesList,
CountriesList: countriesList,
SelectedCountry: null
});


kendo.bind($("body"), indexViewModel);

Calling an ajax call in document ready function

$("document").ready(function () {
GetBaseInfo();
}

function GetBaseInfo()
{
$.ajax({
url: "http://localhost:64283/DRRService.svc/GetBaseData",
dataType: "jsonp",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data == null) {
alert("No Data Available");
}
else {

statesList = data.statesList;
countriesList = data.countriesList;
 
$("#countriesCombo").data("kendoComboBox").dataSource.data = countriesList;
$("#countriesCombo").data("kendoComboBox").refresh();

 
}
}
});

}
Mu UI Part is this

<select id="countriesCombo" data-role="combobox" data-text-field="Value"
data-bind="source:CountriesList" />

The data is not getting refreshed. Can you please provide the solution to this

[Daniel]

Hello Dinesh,

You should set the new arrays to the viewModel e.g.
 

indexViewModel.set("StatesList",  data.statesList);

Kind regards,
Daniel
the Telerik team