All lists loading

[Brian]

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>

[Daniel]

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

[Brian]

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);
}

[Petur Subev]

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