[英]How to remove a kendo ui grid row based upon a column value
On an asp.net mvc view, I have a Kendo UI treeview and a Kendo UI grid. 在asp.net mvc视图上,我有一个Kendo UI树形视图和一个Kendo UI网格。 Each checkbox in the treeview has the same id value in the ID column of the grid.
树状视图中的每个复选框在网格的ID列中具有相同的ID值。 Whenever I uncheck a checkbox in treeview I want to delete the corresponding row in the grid which has this id value.
每当我取消选中Treeview中的复选框时,我都希望删除网格中具有此ID值的相应行。 ID is one of the columns in the grid.
ID是网格中的列之一。 The following is my code:
以下是我的代码:
The following function is executed by the uncheck action on the treeview 以下功能由树视图上的uncheck操作执行
function onCheck() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
var myNodes = treeView.dataSource.view();
for (var i = 0; i < myNodes.length; i++) {
var children = myNodes[i].children.view();
if (children) {
for (var j = 0; j < children.length; j++) {
if ((typeof children[j].checked !== undefined) && (!children[j].checked)) {
alert("You unchecked " + children[j].id); //This shows the correct id value
var dataItem = $("#grid").data("kendoGrid").dataSource.get(children[j].id);
$("#grid").data("kendoGrid").dataSource.remove(dataItem);
}
}
}
}
The following is the code for grid: 以下是网格的代码:
$("#grid").kendoGrid({
pageable:true,
dataSource: dataSource, //comes as json from a url
schema: {
model: {
id: "ID"
}
},
pageSize:3,
columns: [
{
hidden: true,
field: "ID"
},
{
field: "MyFileName"
},
});
When I debugged, the dataItem in var dataItem = $("#grid").data("kendoGrid").dataSource.get(children[j].id); 当我调试时,var dataItem = $(“#grid”)。data(“ kendoGrid”)。dataSource.get(children [j] .id);中的dataItem comes as undefined.
作为未定义。 However the id the treeview retrieved and the id in the grid matched.
但是,treeview检索到的id和网格中的id匹配。 This is the error I see: 0x800a138f - JavaScript runtime error: Unable to get property 'uid' of undefined or null reference
这是我看到的错误:0x800a138f-JavaScript运行时错误:无法获取未定义或空引用的属性'uid'
Obviously no grid row is deleted. 显然,不会删除任何网格行。
Thanks 谢谢
Try this on your checkbox's change event: 在复选框的更改事件上尝试以下操作:
var id = treeView.dataItem(this.closest("li")).id;
var gridDataItem = grid.dataSource.data().filter(function(item) {
return item.id == id;
})[0];
grid.removeRow('tr[data-uid="' + gridDataItem.uid + '"]');
The filter
method will find the related row in the grid by the current id
. filter
方法将通过当前id
在网格中找到相关行。 Use grid's removeRow()
insted of removing directly from dataSource. 使用grid的
removeRow()
可以直接从dataSource中删除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.