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