Cascading Combobox with telerik mvc defaults
I have a search page and want to add some filters to it, my setup is pretty simple, I have a CombobBox for countries and a ComboBox for states.
I want to show ALL states if no country is selected (in fact, the first item of the country combobox is "All"), here is my code:
@(Html.Telerik().ComboBoxFor(m => m.Country)
.Name("cbxCountry")
.BindTo(this.Model.CountryList)
.SelectedIndex(0).CascadeTo("cbxStates"))
@(Html.Telerik().ComboBoxFor(m=>m.State)
.Name("cbxStates")
.DataBinding(binding => binding.Ajax()
.Select("AjaxLoadStates","States")))
Note that even if the .SelectedIndex is set to 1, 3, 1231231, the second combo box is disabled until I select a value. Is there a way to make this work?
+3
source to share
1 answer
You can do this with a client API in javascript:
<script type="text/javascript">
function SelectFirstCountry() {
var cbxCountry = $("#cbxCountry").data('tComboBox')
var cbxStates = $("#cbxStates").data('tComboBox')
cbxCountry.select(1);
cbxStates.enable();
}
$(document).ready(function () {
@{
Html.Telerik().ScriptRegistrar().OnDocumentReady("SelectFirstCountry()");
}
});
</script>
+3
source to share