Upgrading Cascading DropDown Lists Not Working

6 posts, 1 answers
  1. Jim
    Jim avatar
    7 posts
    Member since:
    Mar 2011

    Posted 15 Oct 2013 Link to this post

    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
  2. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 17 Oct 2013 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Jim
    Jim avatar
    7 posts
    Member since:
    Mar 2011

    Posted 17 Oct 2013 Link to this post

    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
  5. Jim
    Jim avatar
    7 posts
    Member since:
    Mar 2011

    Posted 17 Oct 2013 Link to this post

    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
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 18 Oct 2013 Link to this post

    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!
  7. Answer
    Jim
    Jim avatar
    7 posts
    Member since:
    Mar 2011

    Posted 18 Oct 2013 Link to this post

    That did the trick.  Thanks!
Back to Top
Kendo UI is VS 2017 Ready