从另一个组合框刷新Telerik组合框列表
Refresh Telerik Combobox list from another combobox
我们正在使用Telerik控件和我们在刷新Telerik ComboBox的列表时遇到了一些问题。实际上,每当在另一个组合框中选择的值发生更改时,我们都需要刷新组合框的可用值列表。下面是我们的场景:
- Main ComboBox有一个字符串值列表,我们添加了一个事件
- 详细信息组合框有一个值列表,该列表取决于从主组合框中选择的内容
- 当主组合框上的事件被触发时,javascript调用Controller中的操作
- 控制器刷新List02(绑定在ComboBox02中的数据源)的内容
事实上,它运行完全正确,但细节组合框不会刷新。哪里出了问题或遗漏了什么?
非常感谢的帮助
主组合框:
<%=Html.Kendo().DropDownListFor(ourModel => ourModel.ModelPK)
.HtmlAttributes(new { @class="textboxDetails" })
.Name("combo01")
.BindTo((IEnumerable<ModelObject>)ViewData["List01"])
.DataTextField("descriptionText")
.DataValueField("valueID")
.Value(ourModel.ModelPK.ToString())
.Events(e =>
{
e.Select("onSelect");
})
%>
详细信息组合框:
<%=Html.Kendo().DropDownListFor(ourModel => ourModel.secPK)
.HtmlAttributes(new { @class="textboxDetails" })
.Name("combo02")
.BindTo((IEnumerable<ModelObject>)ViewData["List02"])
.DataTextField("descriptionText")
.DataValueField("valueID")
.Value(ourModel.Model02PK.ToString())
%>
aspx页面上的Javascript:
function onSelect(e) {
var dataItem = this.dataItem(e.item);
var itemPK = dataItem.valueID;
$.ajax({
type: 'POST',
url: '/controller01/action01',
data: "{'sentPK':'" + sentPK + "'}",
contentType: 'application/json; charset=utf-8',
success: function (result) {
},
error: function (err, result) {
alert("Error" + err.responseText);
}
});
}
控制器操作:
[AcceptVerbs(HttpVerbs.Post)]
public void action01(model01 editModel, int sentPK)
{
//View data loads correctly
}
我认为用ViewData更新第二个组合框在场景中不起作用:
.BindTo((IEnumerable)ViewData["List01"])
当页面第一次被呈现时,存储在ViewData对象中的值被用来填充组合框,但随后onSelect所做的就是对服务器进行AJAX调用。服务器会更新ViewData对象,但由于组合框已加载了初始数据,因此不会使用新数据刷新。
您必须在第一个组合框的选择更改事件中刷新第二个组合框。选项1:
在您的onSelect()
成功中添加以下行:
var combobox = $("#combo02").data("kendoComboBox");
combobox.dataSource.data(result);
选项2:
将第二个组合框的数据源与服务器绑定:
@(Html.Kendo().ComboBox()
.Name("products")
.HtmlAttributes(new { style = "width:300px" })
.Placeholder("Select product...")
.DataTextField("ProductName")
.DataValueField("ProductID")
.Filter(FilterType.Contains)
.DataSource(source => {
source.Read(read =>
{
read.Action("GetCascadeProducts", "ComboBox")
.Data("filterProducts");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("categories")
)
有关工作示例,请参阅此链接。
相关文章:
- 接受不在列表中的值-引导组合框
- Extjs 3.4如何强制组合框重新加载其下拉列表
- Extjs 4.2.1滚动到组合下拉列表中的选择
- 将带有方括号的字符串转换为组合方括号内容的列表
- 在下拉列表中显示树的组合框
- 验证 2 个下拉列表(只有某些组合有效)
- 在XMPP pubsub中,订阅者可以检索订阅列表或将其与MUC组合
- 如何从多维数组填充列表框(组合框)
- Jquery:需要检查组合框中的值列表
- Angularjs :从列表中选择组合
- 在HTML表中搜索-组合多个值(下拉列表、文本字段)
- 在列表出现后,是否可以从ZK组合框中删除焦点
- 在视图中使用compile in指令和ng repeat的组合会阻止正确更新范围元素列表
- 我将如何在列表中附加所有组合
- 按值获取下拉列表/组合框的索引(客户端)
- 从带有输入框列表的Angular自定义指令中获取组合字符串
- 引导程序下拉列表中的剑道组合框
- 组合日期,从月和年列表中获得天数基础
- 隐藏extjs组合框的下拉列表
- ExtJs多选组合框与复选框列表