繁体   English   中英

如何根据列值删除kendo ui网格行

[英]How to remove a kendo ui grid row based upon a column value

在asp.net mvc视图上,我有一个Kendo UI树形视图和一个Kendo UI网格。 树状视图中的每个复选框在网格的ID列中具有相同的ID值。 每当我取消选中Treeview中的复选框时,我都希望删除网格中具有此ID值的相应行。 ID是网格中的列之一。 以下是我的代码:

以下功能由树视图上的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);
                            }
                        }
                    }
                }

以下是网格的代码:

      $("#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"
             },
      });

当我调试时,var dataItem = $(“#grid”)。data(“ kendoGrid”)。dataSource.get(children [j] .id);中的dataItem 作为未定义。 但是,treeview检索到的id和网格中的id匹配。 这是我看到的错误:0x800a138f-JavaScript运行时错误:无法获取未定义或空引用的属性'uid'

显然,不会删除任何网格行。

谢谢

在复选框的更改事件上尝试以下操作:

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 + '"]');

filter方法将通过当前id在网格中找到相关行。 使用grid的removeRow()可以直接从dataSource中删除。

演示版

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM