CascadeTo method doesn't work on initial value of parent drop down list

[judowalker]

I'm using version 2012.1.214.

I have the following drop down lists:

@Html.Telerik().DropDownListFor(model => model.Soldier.Branch).BindTo(Model.Branches).CascadeTo("Soldier_Rank")

@Html.Telerik().DropDownListFor(model => model.Soldier.Rank).Placeholder("Select Rank...").DataBinding(binding => binding.Ajax().Select("GetRanks", "Ajax"))

If I select an item from the first drop down list, the cascading works correctly and the second drop down list becomes enabled with the correct list items.

However, on page load, the first drop down list already has an item selected by default but the second drop down list remains disabled. This also happens if the page is reloaded due to a server-side validation error.

I would expect the second drop down list to be enabled and populated on initial page load if the first drop down list has an item selected.

[Francois]

I'm having the same problem, also on version 2012.1.214.

[Georgi Krustev]

Hello,

The cascading functionality depends on the change event of the parent dropdownlist. By design the change event is not raised on initialization or when setting selected item using client API. That is why the second dropdownlist in this case is disabled. We will improve this functionality for the next official release of Telerik Extensions for ASP.NET MVC. As a workaround I will suggest you trigger the change event of the parent DropDownList like so:

$("#Soldier_Branch").trigger("valueChange");

Kind regards,
Georgi Krustev
the Telerik team

[judowalker]

Thanks Georgi. I triggered the change event on the page load and it worked.

[Rafael]

I populate combo in grid editor template
how to force valueChange event ?

OnEdit event was fine

[Michael]

I'm having the same issue, except I have three cascading drop downs and this temporary fix does not work for that, even when adding a second .trigger call to the second combo box.  Using version 2012.2.704.  I need all three drop downs pre-populated and enabled.

<!--2nd edit row-->
                        <tr>
                            <!--1st edit column-->
                            <td>
                                @Html.Label("Country")
                            </td>
                            <td>
                                 @(Html.Telerik().ComboBox()
                                .Name("EditSelectedCountryID")
                                .AutoFill(true)
                                .BindTo(Model.CountryDropDownData)
                                .DataBinding(binding => binding.Ajax().Select("_CountryAjaxLoading", "MyManagement"))
                                .Filterable(filtering =>
                                {
                                    filtering.FilterMode(AutoCompleteFilterMode.Contains).MinimumChars(3);
                                })
                                .Value(Model.EditSelectedCountryID.ToString())
                                .CascadeTo("SelectedStateProvID")
                                .HtmlAttributes(new { @tabindex=20 })
                                )
                            </td>
                        </tr>
                        <!--3rd edit row-->
                        <tr>
                            <!--1st edit column-->
                            <td>
                                @Html.Label("State/Province")
                            </td>
                            <td>
                                @(Html.Telerik().ComboBox()
                                .Name("SelectedStateProvID")
                                .AutoFill(true)
                                .BindTo(Model.StateProvDropDownData)
                                .DataBinding(binding => binding.Ajax().Select("_GetStateProvs", "MyManagement"))
                                .Filterable(filtering =>
                                {
                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                })
                                .Value(Model.SelectedStateProvID.ToString())
                                .CascadeTo("SelectedCityID")
                                .HtmlAttributes(new { @tabindex = 30 })
                                )

                            </td>
                        </tr>
                        <!--4th edit row-->
                        <tr>
                            <!--1st edit column-->
                            <td>
                                @Html.Label("City")
                            </td>
                            <td>
                                @(Html.Telerik().ComboBox()
                                .Name("SelectedCityID")
                                .AutoFill(true)
                                .BindTo(Model.CityDropDownData)
                                .DataBinding(binding => binding.Ajax().Select("_GetCities", "MyManagement"))
                                .Filterable(filtering =>
                                {
                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                })
                                .Value(Model.SelectedCityID.ToString())
                                .HtmlAttributes(new { @tabindex=40 })
                                )
                            </td>
                        </tr>

$(document).ready(function () {
           //refresh cascading drop downs
           $("#EditSelectedCountryID").trigger("valueChange");
           $("#SelectedStateProvID").trigger("valueChange");
       });

[Georgi Krustev]

Hello Michael,

 
There is a known issue regarding "cascading" functionality of the ComboBox. The issue is fixed and the next release will include it. For now you can use the attached JS file.

All the best,
Georgi Krustev
the Telerik team

[Riyasat]

Hi Georgi,

I have same problem except I am using four combo boxes. Your JS file fixed the issue partially :(. What happen is, when I call the valueChange event that it took 1,2 and 4th combobox and load values in them but not in 3rd combobox its just get disabled. I am trying from two days now to fix this and I am stuck into that. Is there any other work around for that. 

Please reply ASAP. thanks

Riy

[Piotr]

I have similiar scenario as Michael (but for 2 DropDownList). 
I using: TelerikMvcExtensions 2012.3.1018     681     Thursday, November 15, 2012

Currently second DDL is pre-populated and method BindTo work correctly, but second DDL is  still disabled. 

I need enable second DDL.

edit. this look ok, I had some other problem

[Kadir]

Hi, 

I am using four cascading  dropdownlist in my project. I have above similar problem. After postback form, only first dropdownlist save selected value (because of binding type), other dropdownlists are disable and lost values.


 I tried to trigger "valueChange" event from "document load" event, as below codes.

$(document).ready(function () {

           //refresh cascading drop downs

           $("#EditSelectedCountryID").trigger("valueChange");

           $("#SelectedStateProvID").trigger("valueChange");

       });

But a error was occured in load event, program didnt find dropdownlist in load event.
Then i bind a button click event to trigger codes. It changes selected index but doesnt effect other dropdownlist values, still they saves disable situation.

At same times, i changed my script file with telerik-combobox-min-js.zip. 

How to fire change index event  of first dropdownlist from in load event or is there another solution?

thanks.