KendoUI cascades dropdownlists, you need a value from 2 dropdownlists.

Question

I have 3 cascading dropdownlists as follows:

<p> <label for="categories">Catergories:</label> @(Html.Kendo().DropDownList() .Name("categories") .OptionLabel("Select category...") .DataTextField("CategoryName") .DataValueField("CategoryId") .DataSource(source => { source.Read(read => { read.Action("GetCascadeCategories", "ComboBox"); }); }) ) </p> <p> <label for="products">Products:</label> @(Html.Kendo().DropDownList() .Name("products") .OptionLabel("Select product...") .DataTextField("ProductName") .DataValueField("ProductID") .DataSource(source => { source.Read(read => { read.Action("GetCascadeProducts", "ComboBox") .Data("filterProducts"); }) .ServerFiltering(true); }) .Enable(false) .AutoBind(false) .CascadeFrom("categories") ) <script> function filterProducts() { return { categories: $("#categories").val() }; } </script> </p> <p> <label for="orders">Orders:</label> @(Html.Kendo().DropDownList() .Name("orders") .OptionLabel("Select order...") .DataTextField("ShipCity") .DataValueField("OrderID") .DataSource(source => { source.Read(read => { read.Action("GetCascadeOrders", "ComboBox") .Data("filterOrders"); }) .ServerFiltering(true); }) .Enable(false) .AutoBind(false) .CascadeFrom("products") ) <script> function filterOrders() { return { products: $("#filterOrders").val() }; } </script> </p> 

Here's what the controller looks like:

  public JsonResult GetCascadeCategories() { var northwind = new NorthwindDataContext(); return Json(northwind.Categories.Select(c => new { CategoryId = c.CategoryID, CategoryName = c.CategoryName }), JsonRequestBehavior.AllowGet); } 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); } 

The action in the controller takes only one parameter, which is any value that you specified in the DataValueField () property of the drop-down list.

However, for my third drop-down list, I want the items in it to depend on the BOTH of the first 2 dropdownlists, and not just the previous one.

How can I get the selected value of the 1st and 2nd drop-down list from my action?

Answer 1

To send the value of the first DDL along with the value of the second DDL, when the third DDL requests its data, you just need to add this value to the Read Data function.

eg.

 <script> function filterOrders() { return { categories: $("#categories").val(), products: $("#filterOrders").val() }; } </script> 

Also change the signature of the action method to have one more argument

 public JsonResult GetCascadeOrders(string categories,string products)