[英]How to manually add an item into datasource in Kendo UI Combobox
[英]Add an “All” item to kendo ui listview populated by a remote datasource
我正在使用MVC 4,Web API和Kendo UI控件构建网站。
我在页面上使用Kendo UI Listview过滤网格。 我试图将“ ALL”选项添加为列表视图中的第一项。
这是列表视图 :
var jobsfilter = $("#jobfilter").kendoListView({
selectable: "single",
loadOnDemand: false,
template: "<div class='pointercursor' id=${FilterId}>${FilterName}</div>",
dataSource: filterDataSource,
change: function (e) {
var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
if (dataItem.FilterId !== 0) {
var $filter = new Array();
$filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
jgrid.dataSource.filter($filter);
} else {
jgrid.dataSource.filter({});
}
}
});
这是我的数据源 :
var filterDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/Filter"
}
},
schema: {
model: { id: "FilterId" }
}
});
我尝试了几种不同的方法来实现这一目标:
根据我的阅读,我认为我应该能够在listview的dataBound事件中进行操作,并且我的实现不正确。 这是添加了dataBound事件的listview,它使我的浏览器(Firefox)崩溃-或向listview(IE)添加了大约50个“所有”项目。
var jobsfilter = $("#jobfilter").kendoListView({
selectable: "single",
loadOnDemand: false,
template: "<div class='pointercursor' id=${FilterId}>${FilterName}</div>",
dataSource: {
transport: {
read: {
url: "api/Filter"
}
}
},
dataBound: function (e) {
var dsource = $("#jobfilter").data("kendoListView").dataSource;
dsource.insert(0, { FilterId: 0, FilterName: "All" });
e.preventDefault();
},
change: function (e) {
var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
if (dataItem.FilterId !== 0) {
var $filter = new Array();
$filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
jgrid.dataSource.filter($filter);
} else {
jgrid.dataSource.filter({});
}
}
});
任何帮助将不胜感激。
为什么不在服务器端添加它? 无论如何,如果要在dataBound
执行此dataBound
,只需检查它是否存在,如果不存在则仅添加:
dataBound: function (e) {
var dsource = this.dataSource;
if (dsource.at(0).FilterName !== "All") {
dsource.insert(0, {
FilterId: 0,
FilterName: "All"
});
}
},
作为对该问题的解释,您正在创建一个无限循环,因为在数据源中插入元素将触发change事件,并且列表视图将再次刷新并绑定(从而触发dataBound
)。
您也可以将其封装在自定义小部件中:
(function ($, kendo) {
var ui = kendo.ui,
ListView = ui.ListView;
var CustomListView = ListView.extend({
init: function (element, options) {
// base call to widget initialization
ListView.fn.init.call(this, element, options);
this.dataSource.insert(0, {
FilterId: 0,
FilterName: "All"
});
},
options: {
name: "CustomListView"
}
});
ui.plugin(CustomListView);
})(window.jQuery, window.kendo);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.