[Solved] cascade combo's random event firing

[william]

Hi All,

From my numerous posts, you have probably figured that I am having a great deal of trouble with Cascading combos. I really have come to the conclusion that this control when used in this way is not fit for purpose and really does need some work doing on it by Telerik.

To Recap: I have 5 combo box's making up my cascade. I have got to the point where when first used all the combo's behave as expected. After a Serverside Validation, The combos now seem to repopulate correctly and show the original values selected. On my MVC form, I have other standard textboxes that need completing, Now let's say the validation failed becuase the user failed to enter information in 2 textboxes and all the dropdown data is fine. The first time serverside validation fails and the screen repopulates, the combos appear ok. If the user enters data into any but not all of my required textboxes and thus serverside validation fails again, the combo boxes start to mis-behave. The data is always correct and ok for the first combo, but after that it's totally random my third combo may show data correctly and the rest dont, then next time it may be the last combo and so on.

Total code for Combobox Cascade links.

<td style="width: 20%;">@(Html.Telerik().ComboBox()
                                       .Name("Manufacturer_Dropdown")
                                       .AutoFill(true)
                                       .BindTo(new SelectList(Model.ManufacturerTypes, "Value", "Text"))
                                       .Placeholder("-- Select --")
                                       .ClientEvents(events => events.OnChange("onManufacturer_Change"))
                                       .CascadeTo("Dropdown_Model")
                                       .SelectedIndex(0)
                                  )</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")
                                      .AutoFill(true)
                                      .DataBinding(binding => binding.Ajax().Select("GetDropDownModels", "RoadRisk"))
                                      .Placeholder("-- Select --")
                                      .ClientEvents(events => events.OnChange("onModel_Change"))
                                      .CascadeTo("Dropdown_Year")
                                      .SelectedIndex(0)
                                  )</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")
                                      .AutoFill(true)
                                      .DataBinding(binding => binding.Ajax().Select("GetDropDownYears", "RoadRisk"))
                                      .Placeholder("-- Select --")
                                      .ClientEvents(events => events.OnDataBinding("onTelerik_Dropdown"))
                                      .ClientEvents(events => events.OnChange("onYear_Change"))
                                      .CascadeTo("Dropdown_CC")
                                      .SelectedIndex(0)
                                      )</td>
                            <td>@Html.EditorFor(x => x.Year)</td>
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(x => x.CubicCapacity, null, null, null)</td>
                            <td>@(Html.Telerik().ComboBox()
                                      .Name("Dropdown_CC")
                                      .AutoFill(true)
                                      .DataBinding(binding => binding.Ajax().Select("GetDropDownCC", "RoadRisk"))
                                      .Placeholder("-- Select --")
                                      .ClientEvents(events => events.OnDataBinding("onTelerikCC_Dropdown"))
                                      .ClientEvents(events => events.OnChange("onCC_Change"))
                                      .CascadeTo("Dropdown_Group")
                                      .SelectedIndex(0)
                                      )</td>
                            <td>@Html.EditorFor(x => x.CubicCapacity)</td>
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(x => x.Group, null, null, null)</td>
                            <td>@(Html.Telerik().ComboBox()
                                      .Name("Dropdown_Group")
                                      .AutoFill(true)
                                      .DataBinding(binding => binding.Ajax().Select("GetDropDownGroup", "RoadRisk"))
                                      .Placeholder("-- Select --")
                                      .ClientEvents(events => events.OnDataBinding("onTelerikGroup_Dropdown"))
                                      .ClientEvents(events => events.OnChange("onGroup_Change"))
                                      .SelectedIndex(0)
                                      )</td>

My Document Ready Function that should trigger after failed validation:

$(document).ready(function () { //here we are trying to re-populate the combos and set the values to that selected by the user. Triggered after a serverside validation error
       $.ajaxSetup({
           cache: false
       });
       var selVal = $("#SelectedManufacture").attr("value");
       if (selVal > 0 && selVal != undefined) {
           var comboData = $("#Manufacturer_Dropdown").data("tComboBox");
           comboData.select(selVal);
           comboData.trigger.change(); // *** THIS IS IMPORTANT FOR MAKING THE CASCADE WORK CORRECTLY AFTER SERVERSIDE VALIDATION --- THIS IS NOT DOCUMENTED ANYWHERE, I STUMBLED ON IT *****
           var selVal1 = $("#SelectedModel").attr("value") == 0 ? -1 : $("#SelectedModel").attr("value");
           var selModId = $("#SelectedModelId").attr("value") == 0 ? -1 : $("#SelectedModelId").attr("value");
           var selYear = $("#SelectedYearOfManufacture").attr("value") == 0 ? -1 : $("#SelectedYearOfManufacture").attr("value");
           var selCC = $("#SelectedCC").attr("value") == 0 ? -1 : $("#SelectedCC").attr("value");
           var modVal = $("#SelectedModelText").attr("value");
           var yearVal = $("#SelectedYearText").attr("value");
           var selCCId = $("#SelectedCCId").attr("value") == 0 ? -1 : $("#SelectedCCId").attr("value");
           var ccVal = $("#SelectedCCText").attr("value");
           forceCascadeManufacture(selVal, selVal1);
           forceCascadeModels(selModId, selVal, selYear);
           forceCascadeYear(selModId, selVal, modVal, yearVal, selCC);
           forceCascadeCubicCapacity(selCCId, selVal, modVal, ccVal, yearVal, selCC);

       }
   });

2 of the cascade functions (they all follow the same patern)

function forceCascadeManufacture(manId, modId) {
//        $.ajaxSetup({
//            cache: false
//        });
        var jSonData = '{ "Manufacturer_Dropdown" : "' + manId + '"}';

        $.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.select(modId);
                combo.trigger.change();
            },
            error: function (data) {
                alert(data);
            }
        });
    }

    function forceCascadeModels(modId,manId,selVal) {
//        $.ajaxSetup({
//            cache: false
//        });
        var jSonData = '{ "Dropdown_Model" : "' + modId +
            '","manufactureID" : "' + manId + '"}';

        $.ajax({
            url: window.rootDir + 'RoadRisk/GetDropDownYears',
            type: 'POST',
            data: jSonData,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                var combo = $("#Dropdown_Year").data("tComboBox");
                combo.dataBind(data);
                combo.select(selVal);
                combo.trigger.change();

            },
            error: function (data) {
                alert(data);
            }
        });
    }

[Georgi Krustev]

Hello william,

 
In the current official release of Telerik Extensions for ASP.NET MVC (2012.2.214) the combobox/dropdownlist will not bind and populate child element on load if it has value. This is fixed in the latest internal build.

I am not sure where could be the problem depending on the given code snippets. As far as I noticed there is some custom logic. I will need a custom test project to review the issue locally and advice you further.

Greetings,
Georgi Krustev
the Telerik team

[william]

Hi,

I have managed to perform a workaround with the following code. I have merged the Ajax calls into a single function that only fires the subsequent combo's dropdown on success of the parent, however, I cant help thinking that with your internal release code, it would mean that I can remove a lot of my code and let the control handle it for me as I would expect.

Is it possible for us to obtain a copy of your internal build else, have you an idea on the release date of the build that will incorporate this fix.

Thanks
Bill
ps. in the meantime this is my current code that gets called on document.ready as long as the min combo has a value other than the first default element selected.

function forceCascadeCombos(selVal) {
       var selVal1 = $("#SelectedModel").attr("value") == 0 ? -1 : $("#SelectedModel").attr("value");
       var selModId = $("#SelectedModelId").attr("value") == 0 ? -1 : $("#SelectedModelId").attr("value");
       var selYear = $("#SelectedYearOfManufacture").attr("value") == 0 ? -1 : $("#SelectedYearOfManufacture").attr("value");
       var selCC = $("#SelectedCC").attr("value") == 0 ? -1 : $("#SelectedCC").attr("value");
       var modVal = $("#SelectedModelText").attr("value");
       var yearVal = $("#SelectedYearText").attr("value");
       var selCCId = $("#SelectedCCId").attr("value") == 0 ? -1 : $("#SelectedCCId").attr("value");
       var ccVal = $("#SelectedCCText").attr("value");
       var jSonData = '{ "Manufacturer_Dropdown" : "' + selVal + '"}';
       $.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.select(selVal1);
               combo.trigger.change();
               var jSonData1 = '{ "Dropdown_Model" : "' + selModId +
               '","manufactureID" : "' + selVal + '"}';
               $.ajax({
                   url: window.rootDir + 'RoadRisk/GetDropDownYears',
                   type: 'POST',
                   data: jSonData1,
                   dataType: 'json',
                   contentType: 'application/json; charset=utf-8',
                   success: function (data1) {
                       var combo1 = $("#Dropdown_Year").data("tComboBox");
                       combo1.dataBind(data1);
                       combo1.select(selYear);
                       combo1.trigger.change();
                       var jSonData2 = '{ "Dropdown_Year" : "' + selModId +
                                   '","manufactureID" : "' + selVal +
                                   '","model" : "' + modVal +
                                   '","yearOfManufacture" : "' + yearVal + '"}';
                       $.ajax({
                           url: window.rootDir + 'RoadRisk/GetDropDownCC',
                           type: 'POST',
                           data: jSonData2,
                           dataType: 'json',
                           contentType: 'application/json; charset=utf-8',
                           success: function (data2) {
                               var combo2 = $("#Dropdown_CC").data("tComboBox");
                               combo2.dataBind(data2);
                               combo2.select(selCC);
                               combo2.trigger.change();
                               var jSonData3 = '{ "Dropdown_Group" : "' + selCCId +
                                           '","manufactureID" : "' + selVal +
                                           '","model" : "' + modVal +
                                           '","cc" : "' + ccVal +
                                           '","yearOfManufacture" : "' + yearVal + '"}';
                               $.ajax({
                                   url: window.rootDir + 'RoadRisk/GetDropDownGroup',
                                   type: 'POST',
                                   data: jSonData3,
                                   dataType: 'json',
                                   contentType: 'application/json; charset=utf-8',
                                   success: function (data3) {
                                       var combo3 = $("#Dropdown_Group").data("tComboBox");
                                       combo3.dataBind(data3);
                                       combo3.select(selCC);
                                       combo3.trigger.change();
                                   },
                                   error: function (data3) {
                                       alert(data3);
                                   }
                               });
                           },
                           error: function (data2) {
                               alert(data2);
                           }
                       });
                   },
                   error: function (data1) {
                       alert(data1);
                   }
               });
           },
           error: function (data) {
               alert(data);
           }
       });
   }

[Georgi Krustev]

Hello William,

 
The internal builds and service packs are available only to paid customers. Next official release available for non-paid customers will be in the middle of the June.

Regards,
Georgi Krustev
the Telerik team