Cascading DropDownList with multiple parents

[Derek]

I have a form where the values available in one drop down list depend on the values of two other drop down lists. I'd like for the values in this drop down list to be refreshed whenever either of these two parent lists changes. I searched and found that this functionality is available in Kendo UI. Is it possible to achieve this in MVC?

[Dimitar]

Hello Derek,

Yes it is possible to achieve this in ASP.NET MVC. There is already an existing example which you can use as a starting point:

• http://demos.telerik.com/aspnet-mvc/dropdownlist/cascadingdropdownlist

Regards,
Dimitar
Progress Telerik

[Eric]

Hello Dimitar,

I am not sure if the Demo you linked has changed since Jun 2017 or not, but that page does not have an example of a control that cascades from multiple parents. It resets the second control when first control is changed. I see the option to add multiple .CascadeFrom methods in a ComboBox MVC razor control, but it only ever applies to the last instance. I am trying to use this in a ComboBox control, is this possible or do I need to convert to a DropDownList? 

 

Thank you,

 Eric

[Dimitar]

Hello Eric,

You are indeed correct that the .CascadeFrom() option allows to cascade only from one parent. In case you would like to accomplish a more complex scenario, where one ComboBox could be cascaded from two other ComboBoxes/DropDowns, then you could utilize the Change event of the widgets instead of using the .CascadeFrom() option:

@(Html.Kendo().ComboBox()
  .Name("products")
  ...
  .Change("onComboChange")
)

@(Html.Kendo().ComboBox()
  .Name("categories")
  ...
  .Change("onComboChange")
)

@(Html.Kendo().ComboBox()
  .Name("child")
  ...

)

<script>
  function onComboChange(e) {
    var parentInstance = e.sender;
    var childInstance = $("#child").getKendoComboBox();

    childInstance.dataSource.read({
      parent: parentInstance .element.attr("id"),  // returns "products" or "categories",
      value: parentInstance.value()
    });
  }
</script>

With the above implementation, when the "products" or "categories" ComboBoxes are changed, an ajax request will be triggered to the .Read() url of the child combobox. The request is triggered through the highlighted dataSource.read() method, which also passes the instance that called it e.g "products" or "categories", as well as the selected value. In this way, this data could be used in the child ComboBox controller method to filter the data based on those values:

Regards,
Dimitar
Progress Telerik