[英]Dynamically refresh KendoUI DropdownList
I've the following three KendoUI dropdown list boxes; 我有以下三个KendoUI下拉列表框;
@(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(). 当用户从Make DropDownList中选择一个值时,将使用CascadeFrom()自动填充模型DropDownList。
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. 但现在,我想在更新Make或Model列表时更新Fuel下拉列表,我发现你只能有一个CascadeFrom调用。
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. 作为一种解决方法,我将在模型下拉菜单中使用select事件来触发功能以刷新Fuel下拉菜单并向Fuel下拉菜单添加CascadeFrom(“Make”)。
This will fire the read action after the Make is selected and then refresh the Fuel drop down after a Model is selected. 这将在选择Make后触发读取操作,然后在选择Model后刷新Fuel下拉。
@(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>
这对我有用
$("#Fuel").data("kendoDropDownList").dataSource.read();
Please try Below 请尝试下面
var a = $("#Fuel").data("kendoDropDownList"); a.dataSource.read();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.