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







All Articles