Binding to Model, then cascade

[Gabor]

Hi, 

I have a scenario, where I have two drop-downs that I want to cascade. This is working to an extent, but when I want to expand the functionality to bind intially to a model list, then select a value on page load, I can't think of a way to make this happen. 

These are the two drop-downs: 

Html.Kendo().DropDownListFor(c => c.SelectedGroup)              

                  .BindTo(Model.Groups)

                  .Value(Model.SelectedGroup.Value.ToString())

                  .HtmlAttributes(new { style = "width: 250px" })

                  .Render();

And 

@(Html.Kendo().DropDownListFor(t => t.AuthorisedByExtraID)
                        .DataTextField("Name")
                        .DataValueField("ExtraUserID")
                        .DataSource(source =>
                            source.Read(read => read.Action("SearchAutocompleteEmployees", "Search")
                                                        .Data("onAutoCompleteAdditional")
                                                        .Type(HttpVerbs.Post))
                                    .ServerFiltering(true))
                              .HtmlAttributes(new { style = "width: 250px" })
                              .Enable(false)
                              .AutoBind(true)
                              .BindTo(Model.GroupEmployees)
                              .Value(Model.AuthorisedByExtraID.HasValue ? Model.AuthorisedByExtraID.Value.ToString() : "0")
                      .CascadeFrom("SelectedGroup")
    )

How can I enable the second drop-down to bind to Model.AuthorisedByExtraID when it exists, then when group changes, 
to load the contents via ajax? 

Thanks,
Gabor

[Georgi Krustev]

Hello Gabor,

 
Here is a quote of my answer to the support ticket opened on the same subject:

Thank you for contacting us. We improved cascading functionality of the DropDownLists/ComboBox widget after the official release of Kendo UI. I will suggest you download the latest internal build and give it a try. Also you will need to set the autoBind option of the second DropDownList to false. Thus the parent will be able to set it correctly after it filters the data of the child widget. Let me know what your findings are.

I will suggest you continue our discussion in only one thread to avoid any duplications.

Kind regards,
Georgi Krustev
the Telerik team

[Andrii]

I have two dropdowns, and want to bind it to model and make them as cascade.

@(Html.Kendo().ComboBoxFor(model => model.CountryId)
                .Name("Countries")
                .DataTextField("Text")
                .DataValueField("Value")
                .Filter(FilterType.Contains)
                .BindTo(ViewBag.Countries)
                .HtmlAttributes(new { @class = "input-block-level" })
        )
@(Html.Kendo().ComboBoxFor(model => model.CityId)
                .Filter(FilterType.Contains)
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetCitiesByCountry", "Employee");
                    }).ServerFiltering(true);
                })
                .DataTextField("Text")
                .DataValueField("Value")
                .AutoBind(false)
                .CascadeFrom("Countries")
        .HtmlAttributes(new { @class = "input-block-level" }))

To make cascade, i must give them names, but wth names they don't bind data.
How to make cascade and to bind selected data with model?

[Georgi Krustev]

Hello Andriy,

 
I will suggest you check this help topic regarding strongly-typed Html extensions. In order to get correct name for the cascading functionality you can use GetFullHtmlFieldName method.

Kind regards,
Georgi Krustev
the Telerik team

[Andrii]

Thanks for help!
But it doesn't help. With any other name cascade works, but with this like "HomeAddress.CountryId" got by GetFullHtmlFieldName("") cascade doesn't work

[Georgi Krustev]

Hello Andriy,

 
The "." is not valid jQuery ID selector. You will need to escape all points in the name. Thus jQuery will be able to find the parent element correctly -> "HomeAddress\\.CountryId".

All the best,
Georgi Krustev
the Telerik team

[Andrii]

It started to work only when i'm changed "." to "_" and "[" "]" to "\\[" "\\]"
EmergencyContacts\\[0\\]_Address_CountryId - its my selector that really works (2013.1.514).
Thanks for help!