kendo-uikendo-combobox

Dynamically refresh KendoUI DropdownList


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 ?


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>