[Solved] Forcing Cascade on a combobox

[william]

Hi All,

I have a set of cascade combos of the form:

style="width: 20%;">@(Html.Telerik().ComboBox()
                                       .Name("Manufacturer_Dropdown")
                                       .BindTo(new SelectList(Model.ManufacturerTypes, "Value", "Text"))
                                       .Placeholder("-- Select --")
                                       .ClientEvents(events => events.OnChange("onManufacturer_Change"))
                                       .ClientEvents(events => events.OnLoad("onManufacturer_Load"))
                                       .CascadeTo("Dropdown_Model")
                                  )
@(Html.Telerik().ComboBox()
                                      .Name("Dropdown_Model")
                                      .DataBinding(binding => binding.Ajax().Select("GetDropDownModels", "RoadRisk"))
                                      .Placeholder("-- Select --")
                                      .ClientEvents(events => events.OnChange("onModel_Change"))
                                      .CascadeTo("Dropdown_Year")
                                      )

these all work fine under normal conditions. i.e. I select from the first dropdown cascades to the second combo populates and enables.

I even manage to set some hidden values for the values selected. My problem is that if my form fails validation then the dropdowns all get reset. coming back from the validator my master combo gets bound correctly and because I have saved the selected value in a hidden field I can correctly reset the first combo to show the original value selected. I also have the value selected for the second (cascaded combo), but because I haven't physically selected a value from the first combo, my second combo remain unpopulated and disabled.
When coming back, what I need to be able to do is force the cascade to happen behind the scenes if my hidden value is populated.
The onload event of the second combo box seems a good place to put the code, but what?

I have attempted the answer in http://www.telerik.com/community/forums/aspnet-mvc/combobox/cascadeto-method-doesn-t-work-on-initial-value-of-parent-drop-down-list.aspx

function onManufacturer_Load(e) {
        var selVal = $("#SelectedManufacture").attr("value");
        if (selVal != "" && selVal != "-- Select --" && selVal != undefined) {
            var comboData = $("#Manufacturer_Dropdown").data("tComboBox");
            comboData.text(selVal);
            $("#Manufacturer_Dropdown").trigger("valueChange");
        }
    }

But it doesn't work for me

[william]

I noticed that the link answer uses an ComboBoxFor as opposed to ComboBox. I changed my code to use one of those instead, but it still made no difference. I have also attempted to place the code in the $(document).ready() function and also the pageLoad() function but still has made no difference.

[william]

On my manufacturer_load event, after setting my start combobox text I have also tried calling ajaxRequest() to force the cascade, but that doesn't work either:

function onManufacturer_Load(e) {
        var selVal = $("#SelectedManufacture").attr("value");
        if (selVal != "" && selVal != "-- Select --" && selVal != undefined) {
            var comboData = $("#Manufacturer_Dropdown").data("tComboBox");
            comboData.text(selVal);
            //forceCascadeManufacture();
            comboData.ajaxRequest();
        }
    }

If I  bring my function above into play and remove the ajaxRequest:

function forceCascadeManufacture() {
        var manufacture = $("#SelectedManufacture").attr("value");

        var jSonData = '{ "Manufacturer_Dropdown" : "' + 3 + '"}';

        $.ajax({
            url: window.rootDir + 'RoadRisk/GetDropDownModels',
            type: 'POST',
            data: jSonData,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                var combo = $("#Dropdown_Model").data("tComboBox");
                combo.dataBind(data);
                combo.reload();
            },
            error: function (data) {
                alert(data);
            }
        });

    }

the second combo populates ok with data after perfoming the dataBInd, however the dropdown stays disabled adding the reload() does nothing.

[simon mcanulty]

maybe this will work for you :-

<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => { %>
$("#Manufacturer_Dropdown").trigger("valueChange");
<% }); %>

So, as soon as the document is ready the valueChange event on your Manufacturer_Dropdown will fire and your cascade dropdown should get filled.