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

Question

Can someone provide an example of cascading dropdownlists in the Kendo user interface for ASP.NET MVC using ajax? I am talking about Helper methods ( @Html.Kendo().DropDownList() ). I understand that the child dropdown should call CascadeFrom("ParentDropDownListName") , but what do the controller actions look like? When I try to connect them, I get null exceptions for the parameter passed to the dropdownlists action method for the children. I assumed that behind the scenes, Kendo fetches the parent of the selected DataValueField and adds it to the controller action request for the child list of children, but it doesn't seem to be happening.

Update. I believe that this is due to the assembly of "filters", which is sent to my action with the controller. I just don't know how to handle an incoming filter collection / object in my controller action.

Answer 1

I assume you read an example of a cascading drop-down list on a Kendo site with a cshtml source.

The second drop-down list corresponds to products and cascades from categories as follows:

  @(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 had to add a line to accept the sending request)

In 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 as follows:

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

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