[英]Dynamically refresh KendoUI DropdownList
我有以下三個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)
)
當用戶從Make DropDownList中選擇一個值時,將使用CascadeFrom()自動填充模型DropDownList。
但現在,我想在更新Make或Model列表時更新Fuel下拉列表,我發現你只能有一個CascadeFrom調用。
有關如何實現這一目標的任何建議?
作為一種解決方法,我將在模型下拉菜單中使用select事件來觸發功能以刷新Fuel下拉菜單並向Fuel下拉菜單添加CascadeFrom(“Make”)。
這將在選擇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"))
)
選擇連接到模型下拉列表的事件以刷新燃料下拉:
<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();
請嘗試下面
var a = $("#Fuel").data("kendoDropDownList"); a.dataSource.read();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.