KendoUI DropdownList Dynamic Update

Question

I have the following three KendoUI drop-down lists:

@(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) ) 

The moment a user selects a value from Make DropDownList, the DropDownList model is automatically populated using CascadeFrom ().

But now I want to update the Fuel drop-down list when 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?

Answer 1

As a workaround, I would use the select event on the Drop down model to disable functionality to update your fuel divergence and add a CascadeFrom to the Fuel Consumption position.

This will start the read action after the Create option is selected, and then update the Fuel Consumption after selecting the model.

 @(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 an event connected to the model to update fuel decay:

 <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> 

Answer 2

it works for me

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

Answer 3

Please try below.

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