[Solved] cascade fires the wrong event

[william]

Hi All,

I have a set of 4 combo boxes all cascade from each other. When the form first loads Cascade and all events behave and work as expected. After I attempt to save, if the form fails serverside validation I show errors in the usual way for an MVC app and I then attempt to re-show all data on the view including the last selected items of the combos (Previous post's showing that the 'hack' doesn't work has forced me to Roll my own cascade refresh)  

My combos are configured as below. What happens is as soon as I press the arrow on any dropdown other than the master dropdown, the onManufacturer_Change event gets triggered even though I have no code serverside or client side explicitly calling this.

<td 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")
                                  )</td>
                           <td>@Html.EditorFor(x => x.Manufacturer)</td>
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(x => x.Model, null, null, null)</td>
                            <td>@(Html.Telerik().ComboBox()
                                      .Name("Dropdown_Model")
                                      .DataBinding(binding => binding.Ajax().Select("GetDropDownModels", "RoadRisk"))
                                      .Placeholder("-- Select --")
                                      .ClientEvents(events => events.OnChange("onModel_Change"))
                                      .ClientEvents(events => events.OnLoad("onModel_Load"))
                                      .CascadeTo("Dropdown_Year")
                                      )</td>
                            <td>@Html.EditorFor(x => x.Model)</td>
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(x => x.Year, null, null, null)</td>
                            <td>@(Html.Telerik().ComboBox()
                                      .Name("Dropdown_Year")
                                      .DataBinding(binding => binding.Ajax().Select("GetDropDownYears", "RoadRisk"))
                                      .Placeholder("-- Select --")
                                      .ClientEvents(events => events.OnDataBinding("onTelerik_Dropdown"))
                                      .ClientEvents(events => events.OnChange("onYear_Change"))
                                      .CascadeTo("Dropdown_CC")
                                      )</td>
                            <td>@Html.EditorFor(x => x.Year)</td>
                        </tr>......

so in this instance I have selected a Manufacturer, I have also selected a Model and Year. There are other data items that I have not entered to force a failure.
when my Page comes back I have successfully re-loaded the dropdowns and am showing the data that was originally selected from the dropdowns. At this point I decide that I selected the wrong year and so press the dropdown arrow on my year combo. This immediately triggers the onManufacturer_Change Event.

For clarity here is the code for these events:

function onManufacturer_Load(e) {
        var selVal = $("#SelectedManufacture").attr("value");
        if (selVal != "" && selVal != "-1" && selVal != undefined) {
            var comboData = $("#Manufacturer_Dropdown").data("tComboBox");
            comboData.select(selVal);
            forceCascadeManufacture(selVal); //ajax postback to the server

        }
    }

function onManufacturer_Change(e) {
        if ($("#Manufacturer_Dropdown").context.activeElement.value != "-- Select --") {
            $("#Manufacturer").removeClass('EnabledTextBox').addClass('NotEnabledTextBox').attr("readonly", true);
            $("#Manufacturer").attr("value", "");
            var selman = $("#Manufacturer_Dropdown").data("tComboBox").selectedIndex;
            $("#SelectedManufacture").val(selman);
        } else {
            $("#Manufacturer").removeClass('NotEnabledTextBox').addClass('EnabledTextBox').removeAttr("readonly");
            $("#SelectedManufacture").attr("value", "");
        }
    }

function onYear_Change(e) {
        if ($("#Dropdown_Year").context.activeElement.value != "-- Select --") {
            $("#Year").removeClass('EnabledTextBox').addClass('NotEnabledTextBox').attr("readonly", true);
            $("#Year").attr("value", "");
            var selyear = $("#Dropdown_Year").data("tComboBox").selectedIndex;
            $("#SelectedYearOfManufacture").val(selyear);
        }
        else {
            $("#Year").removeClass('NotEnabledTextBox').addClass('EnabledTextBox').removeAttr("readonly");
            $("#SelectedYearOfManufacture").attr("value", "");
        }
        $("#YearId").attr("value", $("#Dropdown_Year").attr("value"));
    }

why is this event getting triggered?

[william]

ok,

Under normal conditions I.e. before a postback has taken place, when a combo is selected for dropdown it first of all performs any change event code on the cascade combos in the order in which they have been chained, then once a selection has been made the change event for the dropdown in use will be triggered. (seems logical and works fine).

see drop1

After Postback, I have my dropdowns populated and the original data displays correctly see drop2.

Now as soon as I select year dropdown instead of change events being fired for the combo's below, the change event for the Manufacturer gets fired thus forcing model to reset. For some reason, the year dropdown doesn't get reset, presumably because I am in the process of making a new selection. If I continue to make a selection so that the 1st and 3rd combos show a selection, if I then go back to model which shows '-- select --' it first raises the cubic capacities change event as opposed to the year. see drop3.