MVC KendoUI cascading dropdownlists, on multiple parents

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)

Please see a sample multiple parent cascade example [Multiple Parents Cascade DropDownList](http://jsbin.com/qikow/2/edit?html,output) — Nitin Mall, Jul 23 '14 at 11:05
@FedericoNavarrete: I have posted the fix. It is pretty simple to achieve. — giparekh, Jul 05 '17 at 16:47

score 2 · Answer 1 · answered Jul 23 '14 at 11:48

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.

I have just edited the onCascade javascript function and added $ sign before dropdownlist otherwise it is giving the error. The solution is perfect and works as per the requirement. Saved a lots of time. Thanks!!! — giparekh, Jul 23 '14 at 14:48
It doesn't work :\, only the first cascading works if you have a second one, it doesn't do anything. — Federico Navarrete, Jul 05 '17 at 12:03

giparekh · Accepted Answer · 2017-07-06T08:19:16.593

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

You're awesome! Thanks for your help! – Federico Navarrete Jul 06 '17 at 07:45 — Federico Navarrete, Jul 06 '17 at 07:45

MVC KendoUI cascading dropdownlists, on multiple parents

2 Answers2