This is a migrated thread and some comments may be shown as answers.

Upgrading Cascading DropDown Lists Not Working

5 Answers 112 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Jim
Top achievements
Rank 1
Jim asked on 15 Oct 2013, 11:40 PM
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

5 Answers, 1 is accepted

Sort by
0
Ignacio
Top achievements
Rank 1
answered on 17 Oct 2013, 07:13 PM
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.
0
Jim
Top achievements
Rank 1
answered on 17 Oct 2013, 09:38 PM
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
0
Jim
Top achievements
Rank 1
answered on 17 Oct 2013, 10:34 PM
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
0
Georgi Krustev
Telerik team
answered on 18 Oct 2013, 07:09 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
Jim
Top achievements
Rank 1
answered on 18 Oct 2013, 03:45 PM
That did the trick.  Thanks!
Tags
DropDownList
Asked by
Jim
Top achievements
Rank 1
Answers by
Ignacio
Top achievements
Rank 1
Jim
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or