Dynamically refresh KendoUI DropdownList

Question

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 ?

Would the Fuel drop down ever fire a CascadeFrom based on a Model selection? Isn't the Model selection cascading from the Make? Seems like your Fuel drop down will only need to Cascade from the Make drop down. — Brett McCarty, Jul 23 '13 at 16:31
I want to allow the user to either select a Make and get all FuelTypes or selected a Make and then Model, to then get all FuelTypes. — neildt, Jul 23 '13 at 16:38
I found a solution to my question on this post http://stackoverflow.com/questions/13620877/kendoui-cascading-dropdownlists-need-value-from-2-dropdownlists — neildt, Jul 24 '13 at 09:56

D__ · Answer 1 · 2017-08-23T20:21:45.187

6

this works for me

$("#Fuel").data("kendoDropDownList").dataSource.read();

edited Aug 23 '17 at 20:21

answered Feb 24 '15 at 18:30

D__

141
1
5

4

it would be "$("#Fuel").data("kendoDropDownList").dataSource.read();" The property "dataSource" has a capital letter – Anytoe Jul 01 '16 at 11:27

score 4 · Accepted Answer · answered Jul 23 '13 at 16:58

4

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>

answered Jul 23 '13 at 16:58

Brett McCarty

399
2
5

Thanks. This is kind of what I was trying to figure out. How would I pass the selected MakeId or ModelId, so that the Fuel list only matches what is selected ? – neildt Jul 23 '13 at 17:04
Within the select method you can do something like `this.dataItem(e.item.index()).value` for the ModelId. If you cascade the fuel drop down from the Make there is a Data fluent method you can attach to the read action within the dataSource. This [demo](http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html) has a good example. – Brett McCarty Jul 23 '13 at 17:52
Thanks in your experience, what would you do if I wanted to add additional drop down lists, like engine size, colour etc all of which will need to be updated whenever another drop down list is changed – neildt Jul 23 '13 at 18:57
I like your approach with the cascading drop downs and would probably continue down that path. The tipping point would be on how many options there are and if they will be used by most users. If the most likely use case is a user selecting all the options you present then you would be better off bringing all the options back at once from the server. – Brett McCarty Jul 23 '13 at 19:24
I think I'd have a max of 5 additional drop down list boxes. If you look at the auto trader website this is the sort of technique I'm wanting to implement. Any recommendations on how to achieve this ? – neildt Jul 23 '13 at 20:30
They are using a cascading drop down on make and model and from what I can tell the rest of the additional options are preloaded. – Brett McCarty Jul 23 '13 at 21:24
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/34018/discussion-between-tommo1977-and-brett-mccarty) – neildt Jul 23 '13 at 21:30

score 0 · Answer 3 · answered May 20 '19 at 01:22

0

Please try Below

var a = $("#Fuel").data("kendoDropDownList");
a.dataSource.read();

answered May 20 '19 at 01:22

MSTdev

4,507
2
23
40

Dynamically refresh KendoUI DropdownList

3 Answers3