Cascading DropDownList in Kendo UI for ASP.NET MVC using Ajax?

Question

Can someone provide an example of cascading dropdownlists in Kendo UI for ASP.NET MVC using ajax? I am talking about the Helper methods (@Html.Kendo().DropDownList()) I understand that the child dropdownlist must call CascadeFrom("ParentDropDownListName") but what do the controller actions look like? When I try to wire them up, I get null exceptions for the parameter being passed into the child dropdownlists action method. I was assuming that behind the scenes, Kendo was extracting the parent selected DataValueField and appending it to the controller action request to the child dropdownlist but it doesn't seem like that is happening.

Update: I believe this has to with a "filters" collection that is being sent over to my controller action. I just don't know how to handle the incoming filter collection/object in my controller action.

Answer 1

I guess that you have read the example for the cascading dropdownlist on the Kendo UI site with the cshtml code source.

The second dropdownlist corresponds to the products and is cascading from the categories in the following way :

    @(Html.Kendo().DropDownList()
      .Name("products")
      .OptionLabel("Select product...")
      .DataTextField("ProductName")
      .DataValueField("ProductID")
      .DataSource(source => {
          source.Read(read =>
          {
              read.Action("GetCascadeProducts", "ComboBox")
                  .Data("filterProducts")
                  .Type(HttpVerbs.Post); // This line serves to accept POST requests
          })
          .ServerFiltering(true);
      })
      .Enable(false)
      .AutoBind(false)
      .CascadeFrom("categories")

(note, that I have had to add the line to accept Post request)

With this example, you will need a controller with the following syntax :

    [HttpPost]
    public JsonResult GetCascadeProducts(int category)
    {
        List<Product> Products = new List<Product>();

        Products.Add(new Product(1, 0, "Chai"));
        Products.Add(new Product(1, 1, "Chang"));
        Products.Add(new Product(1, 2, "Guarana Fantastica"));
        Products.Add(new Product(2, 0, "Aniseed Syrup"));
        Products.Add(new Product(2, 1, "Seasoning"));

        var ProductsInCategory = from p in Products where p.CategoryID == category select p;

        return Json(ProductsInCategory);
    }

The template for my class is the following one :

    public class Product
    {
        public int CategoryID { get; set; }
        public int ProductID { get; set; }
        public string ProductName { get; set; }

        public Product(int category, int id, string name)
        {
            CategoryID = category;
            ProductID = id;
            ProductName = name;
        }
    }

If you have the correct Javascript function :

function filterProducts() {
    return {
        category: $("#categories").val()
    };
}

(category should be the same as the parameter name in the controller method) normally, everything should work fine!