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

All lists loading

3 Answers 95 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 24 Jul 2013, 07:45 PM
Hello,

I'm implementing cascading dropdown lists in my web app. I currently have three lists and have them set up following the example listed on your site. However, when I make a selection in the first dropdown, the other two will then read in their data and become enabled. It doesn't cascade down properly like in the example. I don't see any difference between the example and how I have things coded, so perhaps someone here can see what I'm doing wrong. I want my lists to cascade properly. Thanks for any and all help. Code sample listed below.

        <p>
            <label class="searchLabel" for="state">State:</label>
            @(Html.Kendo().DropDownList()
                  .Name("state")
                  .HtmlAttributes(new { style = "width:275px" })
                  .OptionLabel("Select state...")
                  .DataTextField("StateName")
                  .DataValueField("StateAbbr")
                   
                  .DataSource(source => source.Read(read => read.Action("GetStates", "Home")))
                  )
        </p>
        <p>
            <label class="searchLabel" for="county">County:</label>
            @(Html.Kendo().DropDownList()
                .Name("county")
                .HtmlAttributes(new { style = "width:275px" })
                .OptionLabel("Select county...")
                .DataTextField("CountyName")
                .DataValueField("CountyName")
                .DataSource(source => source.Read(read => read.Action("GetCounties", "Home").Data("filterCounties"))
                                            .ServerFiltering(true))
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("state")
            )
        </p>
        <p>
            <label class="searchLabel" for="city">City:</label>
            @(Html.Kendo().DropDownList()
                .Name("city")
                .HtmlAttributes(new { style = "width:275px" })
                .OptionLabel("Select city...")
                .DataTextField("CityName")
                .DataValueField("CityName")
                .DataSource(source => source.Read(read => read.Action("GetCities", "Home").Data("filterCities"))
                                            .ServerFiltering(true))
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("county")
            )
        </p>
 
<script>
    function filterCounties() {
        return {
            state: $("#state").val()
        };
    }
    function filterCities() {
        return {
            state: $("#state").val(),
            county: $("#county").val()
        };
    }
 
    $(document).ready(function() {
        $("#state").data("kendoDropDownList");
        $("#county").data("kendoDropDownList");
        $("#city").data("kendoDropDownList");
    });
</script>

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 26 Jul 2013, 12:35 PM
Hello Brian,

The provided code looks correct. Since server filtering is used the filtered data should be returned from the server. Could you share the code you are using for the "GetStates", "GetCounties" and "GetCities" action methods?

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 26 Jul 2013, 12:44 PM
Daniel,

Here is the code for the three Gets.

Thanks,

Brian
public JsonResult GetStates()
{
    var states = new StateModel();
 
    return Json(states.GetStates(),
                        JsonRequestBehavior.AllowGet);
}
 
public JsonResult GetCounties(string state)
{
    var counties = new CountyModel();
 
    return string.IsNullOrEmpty(state) ? Json(string.Empty, JsonRequestBehavior.AllowGet) : Json(counties.GetCounties(state), JsonRequestBehavior.AllowGet);
}
 
public JsonResult GetCities(string state, string county)
{
    var cities = new CityModel();
 
    if (string.IsNullOrEmpty(county) || county == "undefined" || county == "Select county...")
    {
        county = "";
    }
 
     return string.IsNullOrEmpty(state) ? Json(string.Empty, JsonRequestBehavior.AllowGet) : Json(cities.GetCities(state, county), JsonRequestBehavior.AllowGet);
}
0
Petur Subev
Telerik team
answered on 30 Jul 2013, 01:20 PM
Hello Brian,

The code you shared looks correct, anyway you have not shared how exactly the filtering is implemented inside of the getCountry and getCities methods that you have used.

If it looks like the code from this demo:
http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html

i.e.

public JsonResult GetCascadeProducts(string categories)
  {
      var northwind = new NorthwindDataContext();
      var products = northwind.Products.AsQueryable();
 
      if (!string.IsNullOrEmpty(categories))
      {
          products = products.Where(p => p.CategoryID.ToString() == categories);
      }
 
      return Json(products.Select(p => new { ProductID = p.ProductID, ProductName = p.ProductName}), JsonRequestBehavior.AllowGet);
  }
 
  public JsonResult GetCascadeOrders(string products)
  {
      var northwind = new NorthwindDataContext();
      var orders = northwind.Order_Details.AsQueryable();
 
      if (!string.IsNullOrEmpty(products))
      {
          orders = orders.Where(o => o.ProductID.ToString() == products);
      }
 
      return Json(orders.Select(o => new { OrderID = o.OrderID, ShipCity = o.Order.ShipCity }), JsonRequestBehavior.AllowGet);
  }

Then it should behave the same way.

If it does not please put this in a sample project and send it so we can investigate what goes wrong and see how exactly the cascading differs from the demos.

Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
Brian
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Brian
Top achievements
Rank 1
Petur Subev
Telerik team
Share this question
or