Dynamically refresh KendoUI DropdownList
Solution 1
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>
Solution 2
this works for me
$("#Fuel").data("kendoDropDownList").dataSource.read();
neildt
An enthusiastic IT professional, coming from a Classic ASP background. Currently programming with Visual Studio in C# .NET, Web Services (XSMX and Wcf), MS SQL Server, MySQL, and IIS 8.5. Interested in learning new technologies, design patterns and exciting career opportunities.
Updated on May 20, 2020Comments
-
neildt about 4 years
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 ?