MVC KendoUI cascading dropdownlists, on multiple parents - asp.net-mvc

Question

I have three column in kendoui grid as "Delivery Location", "PickUp location" and "Available Shipping Options". When either of the location column changed("Delivery location" or "Pickup location"), the "Available shipping options" column should be changed accordingly.
I can achieve this using Cascade-from for two column(i.e. if one column changed, other would list the result based on the first column data) but don't know how to achieve same for two or more column.
How can i achieve cascading for two or more column?
Code:
JS Function:
function filterShippingOptions() {
return { pickUpLocationId: $("#PickUpLocationId").data("kendoDropDownList").value(), deliveryLocationId: $("#deliveryLocationId").data("kendoDropDownList").value() };
}
AvailableShippingOptions Editor:
#(Html.Kendo().DropDownListFor(m => m)
.DataValueField("ShippingOptionId")
.DataTextField("ShippingOptionName")
.OptionLabel("Select...")
.AutoBind(false)
.DataSource(dataSource =>
{
dataSource.Read(read =>
{
read.Action("GetAvailableShippingOptions", "ProductionZone").Type(HttpVerbs.Post)
.Data("filterShippingOptions");
}).ServerFiltering(true);
})
//.CascadeFrom("RMSupplierLocationViewModel")
.CascadeFrom("DeliveryLocationViewModel")
)
#Html.ValidationMessageFor(m => m)

Answer 1

There are two options to achieve what you are looking for:
Option 1: You can Use Cascading + Server Filtering
Option 2: You can Use Cascading + Client Side Filtering
First of all you will need to define events on both of your drop downs of Locations ("Delivery location" or "Pickup location") as below:
#(Html.Kendo().DropDownListFor(m => m)
.Name("PickUpLocationId")
.DataValueField("ShippingOptionId")
....
....
.Events(evnt=>evnt.Cascade("onCascade")) //Need to add this Event on Parent Drop Downs
)
Repeat the same for another Location DropDown. Your Cascade Event should be as below:
Server side filtering
#(Html.Kendo().DropDownListFor(m => m)
.Name("ShipingOption")
.DataValueField("ShippingOptionId")
.DataTextField("ShippingOptionName")
.OptionLabel("Select...")
.AutoBind(false)
.DataSource(dataSource =>
{
dataSource.Read(read =>
{
read.Action("GetAvailableShippingOptions", "ProductionZone").Type(HttpVerbs.Post)
.Data("filterShippingOptions");
}).ServerFiltering(true);
})
)
JS Function
function onCascade(e){
("#ShipingOption").data("kendoDropDownList").dataSource.read();
}
function filterShippingOptions() {
return { pickUpLocationId: $("#PickUpLocationId").data("kendoDropDownList").value(), deliveryLocationId: $("#deliveryLocationId").data("kendoDropDownList").value() };
}
Client side filtering
For Second option you will need to retrieve all the records for the Shipping option, disable server filtering to false and apply the filtering in the onCascade JS Function.

Answer 2

I have achieved this as follows:
View code:
<script>
function filterShippingOptions() {
return { locationId: $("#LocationViewModel").data("kendoDropDownList").value(), deliveryLocationId: $("#Location2ViewModel").data("kendoDropDownList").value() };
}
function onCascade(e) {
$("#ShippingOptionViewModel").data("kendoDropDownList").dataSource.read();
}
</script>
Editor code:
#model Comanex.Models.ShippingOptionsViewModel
#(Html.Kendo().DropDownListFor(m => m)
.DataValueField("ShippingOptionId")
.DataTextField("ShippingOptionName")
.OptionLabel("Select")
.AutoBind(false)
.DataSource(dataSource =>
{
dataSource.Read(read =>
{
read.Action("GetAvailableShippingOptions", "Shipping").Type(HttpVerbs.Post)
.Data("filterShippingOptions");
}).ServerFiltering(true);
})
)
#Html.ValidationMessageFor(m => m)
Controller Method:
public JsonResult GetAvailableShippingOptions(string PickUpLocationId, string DeliveryLocationId)
{
//Getting value from database
return Json(ShippingOptionRepository.GetAvailableShippingOptions(PickUpLocationId, DeliveryLocationId), JsonRequestBehavior.AllowGet);
}
Both the Parent controls(Dropdownlists in my case) should have following:
.Events(evnt => evnt.Cascade("onCascade")) //Need to add this Event on Parent Drop Downs