How to keep model up to date with dynamic datasource? - asp.net-mvc

Question

In the case that I am fetching Country and State data from an API, I can't seem to keep the link to the model after updating a kendo combobox's data source.
Let's say that there is a form that will be used internationally. So we want to provide a Country Combobox and a State Combobox and then filter the state by the selected country. If the user selects a country, then the state combobox updates. This is great! However, when I go to submit, the stateid field in the model is null.
I've tried manually changing the datasource, and can't really find any more information on this kind of issue. If anyone can point me in the right direction, that would be greatly appreciated.
Data model:
class ExampleModel {
[display(name='StateId')]
int? stateId;
[display(name='CountryId')]
int? countryId
}
razor:
<div id='country-wrapper'>
#(Html.Kendo().ComboBoxFor(m => m.CountryId)
.Filter("contains")
.Placeholder("-- Select Country --")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new SelectList(stateList, "CountryId", "CountryName", 1))
.Suggest(true)
.HtmlAttributes(new { #id = "CountryId", onchange = " CountryChangeEvent(this); ComboChangeEvent(this);"
}));
</div>
<div id='state-wrapper'>
#(Html.Kendo().ComboBoxFor(m => m.StateId)
.Filter("contains")
.Placeholder("-- Select State --")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new SelectList(stateList, "StateId", "StateName"))
.Suggest(true)
.HtmlAttributes(new { #id = "StateId", onchange = "ComboChangeEvent(this)"
}));
</div>
js:
function CountryChangeEvent(elem) {
var chosenId = $("#CountryId").data('kendoComboBox').value();
if (!chosenId) return;
$("#ProfileStateId").kendoComboBox({
dataTextField: "Text",
dataValueField: "Value",
dataSource: {
transport: {
read: {
// call this method in the controller and reset datasource
cache: false,
serverFiltering: true,
async: false,
dataType: "json",
url: '#Url.Action("GetStatesByCountryJson", "Home")?countryId=' + chosenId,
}
}
},
filter: "contains",
suggest: true
});
var combobox = $("#StateId").data('kendoComboBox');
combobox.select(function (dataItem) {
// clear the statecombobox
return dataItem.Value === '';
});
}
Expected
I would expect that the state list would change when the CountryChangeEvent function is called. Also, when you submit the form, the StateId value would be stored in the model.
Actual
It does in fact change the state combobox visually. You can see all of the states and filter. However, when you submit and debug, you can see that the StateId in the model is null.
Current workaround/hack
I have found that if I download all states(for all countries) in the beginning, then it works as intended.

Answer 1

I found another workaround/hack that works much better than downloading all states on load. I changed the control from a combo box to a drop down list and voila, it works now.
No idea why this didn't work, but I'll close it since my problem was fixed, and a combo box is really over kill for this kind of problem anyway.
If you come across this problem hoping for a solution look into cascading dropdownlist
Courtesy of CarstenFranke
Should work better for you.