Upgrading Cascading DropDown Lists Not Working

[Jim]

We're upgrading from Telerik MVC to Kendo, and have followed the migration instructions and looked at docs and forum posts for two cascading dropdown lists.  However,  the revised code is not working - the cascading controller event never fires (it's in the same controller as the view).  One caveat is that the dropdowns are inside a grid detail, so the controller method had to peek into Request.Form[0] to get the argument.  But, that controller method isn't even firing in the revised code.  UI-wise, it looks as if the cascading code is trying to refresh the dropdown, but no data ever shows up.

Old code:
                    @(Html.Telerik().DropDownListFor(i => item.CountryCodeID)
                    .Name("addressEditCountryCodeID_" + item.ListIndex)
                    .BindTo(new SelectList(countries, "key", "value", item.CountryCodeID))
                    .CascadeTo("addressEditState_" + item.ListIndex)
                    .HtmlAttributes(new { @class = "dropDownList", style = "width: 250px; float:left; margin-right: 10px;" })
                    )
...
                @(Html.Telerik().DropDownListFor(model => item.State)
                    .Name("addressEditState_" + item.ListIndex)
                    .DataBinding(binding => binding.Ajax().Select("GetStatesByCountryCode", "Recipients"))
                    .ClientEvents(c => c.OnDataBound("getStateValue"))
                    .HtmlAttributes(new { @class = "dropDownList", style = "width: 90px; float:left; margin-right: 10px;" })
                    )

New code:
                    @(Html.Kendo().DropDownListFor(i => item.CountryCodeID)
                    .Name("addressEditCountryCodeID_" + item.ListIndex)
                    .BindTo(new SelectList(countries, "key", "value", item.CountryCodeID))
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .HtmlAttributes(new { @class = "dropDownList", style = "width: 250px; float:left; margin-right: 10px;" })
                    )
...

                @(Html.Kendo().DropDownListFor(model => item.State)
                    .Name("addressEditState_" + item.ListIndex)
                    .CascadeFrom("addressEditCountryCodeID_" + item.ListIndex)
                    // .DataBinding(binding => binding.Ajax().Select("GetStatesByCountryCode", "Recipients"))
                    .DataSource(source => {
                        source.Read(read =>
                        {
                            read.Action("GetStatesByCountryCode", "Recipients");
                        })
                    .ServerFiltering(true);
                    })
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .Events(c => c.DataBound("getStateValue"))
                    .HtmlAttributes(new { @class = "dropDownList", style = "width: 90px; float:left; margin-right: 10px;" })
                    )


Controller method:
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult GetStatesByCountryCode()
        {
            // Because we can have multiple addresses and Telerik hard-codes the control name as a parameter,
            // we're using Request.Form[0] in order to extract the value.
            List<USState> result = new List<USState>();
            int countryCodeId;
            if (int.TryParse(Request.Form[0].ToString(), out countryCodeId))
            {
                result = LookupService.GetStateListByCountryCode((int)countryCodeId).ToList();
                if (result.Count > 0)
                {
                    result.Insert(0, new USState() { Code = "", Name = "" }); // add a blank at the beginning.
                }
            }
            return new JsonResult { Data = new SelectList(result, "Code", "Code") };            
        }

Ideas?  (Or just another pair of eyes?)

Jim Stanley
Blackboard Connect

[Ignacio]

Try removing the HttpVerbs.Post attribute from your controller action.
Im pretty sure the request its going to make by default is a Get Request. (which is better for this kind scenarios anyway)

Hope that fixes it.

[Jim]

We're halfway there.  The method is now indeed fired (good news).  Bad news:  I can't find the value of the calling dropdown anywhere.  Because this can be invoked from a dynamically-named component, I had to use Request.Form[0] to retrieve the calling drop-down's value in the previous version of the code.  Neither Request.Form nor Request.QueryString reveals anything about the value.  Any ideas on how to pass it?

Thanks

Jim Stanley
Blackboard Connect

[Jim]

Closer but not there yet.  I re-checked the documentation and discovered that Request.Form[3] provides the value I was seeking to populate.  Changing the request type to GET does indeed fire the controller method.

But... the dropdown still doesn't populate.  I see the little "loading" icon, but even though I see the controller returning data, it doesn't make it into the list.  Could it be the JSON type of the data returned?

Thanks

Jim Stanley
Blackboard Connect

[Georgi Krustev]

Hello Jim,

 
Indeed,  the default request type of the data source is GET. Please note that you will need to allow returning JSON result on GET requests:

return Json(new SelectList(result, "Code", "Code"), JsonRequestBehavior.AllowGet);

To be sure that this is the cause of the problem use the browser's developer tool to verify what the response from the server is and check for any errors.

As to the filter parameters, the data source sends a list of filters to the server. You can get them from the QueryString. You can also check this project, which shows how to use Dynamic Linq to parse the filter parameters and use them to filter data.

Regards,
Georgi Krustev
Telerik

[Jim]

That did the trick.  Thanks!