Dynamically refresh KendoUI DropdownList

kendo-combobox, kendo-ui

Solution

As a workaround I would use the select event on the Model drop down to fire off functionality to refresh your Fuel drop down and add a CascadeFrom("Make") to the Fuel drop down.

This will fire the read action after the Make is selected and then refresh the Fuel drop down after a Model is selected.

@(Html.Kendo().DropDownList()
      .Name("Model")
      .HtmlAttributes(new { style = "width:auto;height:25px" })
      .OptionLabel("Model (any)")
      .DataTextField("Name")
      .DataValueField("ModelId")
      .DataSource(source => {
          source.Read(read =>
          {
              read.Action("GetModels", "Home")
                  .Data("FilterModels");
          })
          .ServerFiltering(true);
      })
      .Enable(false)
      .AutoBind(false)
      .CascadeFrom("Make")
      .Events(events => events.Select("select"))
)

Select event wired into the Model drop down to refresh the fuel drop down:

<script>
  function select(e) {
    // get a referenence to the Kendo UI DropDownList
    var dropdownlist = $("#Fuel").data("kendoDropDownList");

    if (dropdownlist) {
      // re-render the items in drop-down list.
      dropdownlist.refresh();
    }
  };
</script>

Problem

I've the following three KendoUI dropdown list boxes; ``` @(Html.Kendo().DropDownList() .HtmlAttributes(new { style = "width:auto;height:25px" }) .OptionLabel("Make (any)") .Name("Make") .DataTextField("Name") .DataValueField("MakeId") .DataSource(source => { source.Read(read => { read.Action("GetMakes", "Home"); }) .ServerFiltering(true); }) .SelectedIndex(0) ) @(Html.Kendo().DropDownList() .Name("Model") .HtmlAttributes(new { style = "width:auto;height:25px" }) .OptionLabel("Model (any)") .DataTextField("Name") .DataValueField("ModelId") .DataSource(source => { source.Read(read => { read.Action("GetModels", "Home") .Data("FilterModels"); }) .ServerFiltering(true); }) .Enable(false) .AutoBind(false) .CascadeFrom("Make") ) @(Html.Kendo().DropDownList() .Name("Fuel") .HtmlAttributes(new { style = "width:auto;height:25px" }) .OptionLabel("Fuel type (any)") .DataTextField("Name") .DataValueField("FuelTypeId") .DataSource(source => { source.Read(read => { read.Action("GetFuelTypes", "Home") .Data("FilterFuelTypes"); }) .ServerFiltering(true); }) .Enable(false) .AutoBind(false) ) ``` At the moment when the user selects a value from the Make DropDownList, the model DropDownList is automatically populated using the CascadeFrom(). But now, I want to update the Fuel drop down list when either the Make or Model lists are updated, and I found that you can only have one CascadeFrom call. Any recommendations on how I can achieve this ?

Original source