使用jQuery从Kendo UI网格中删除行

Question

我正在使用Kendo UI网格并删除行，正在使用带有自举程序的自定义按钮，当我单击它时，使用ajax，我会调用Web api方法来删除该行，如果成功删除，则将该行从中删除DOM。（我没有使用kendo的destroy命令）

我的问题是，如果我尝试过滤已删除的那一行，它会再次出现在网格中，而且似乎根本没有被删除。

这是我的Kendo UI网格：

var table = $("#grid").kendoGrid({                
    dataSource: {
        transport: {
            read: {
                url: "/api/customers",
                dataType: "json"
            }
        },
        pageSize: 10
    },               
    height: 550,
    filterable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [{
        template: "<a href='' class='btn-link glyphicon glyphicon-remove js-delete' title='Delete' data-customer-id= #: Id #></a>",
        field: "Id",
        title: "&nbsp;",
        filterable: false,
        sortable: false,
        width: 50,
        attributes: {
            style: "text-align: center" 
        }
    }, {
        field: "Name",
        title: "Name",
        width: 100,
    }, {
        field: "LastName",
        title: "LastName",
        width: 100,
    }, {
        field: "Email",
        title: "Email",
        width: 150
    }]
});

这是我的jQuery代码，用于删除行：

$("#grid").on("click", ".js-delete", function () {
     var button = $(this);
     if (confirm("Are you sure you want to delete this customer?")) {
         $.ajax({
             url: "/api/customers/" + button.attr("data-customer-id"),
             method: "DELETE",
             success: function () {
                 button.parents("tr").remove();  //This part is removing the row but when i filtered it still there.
             }
         });
     }
 });

我知道在jQuery DataTables中何时可以执行以下操作：

 table.row(button.parents("tr")).remove().draw();

如何使用jQuery使用Kendo UI做类似的事情？

Answer 1

永远不要玩剑道的小部件DOM。始终改用它的方法。

使用网格的removeRow()：

$("#grid").on("click", "button.remove", function() {
    var $tr = $(this).closest("tr"),
        grid = $("#grid").data("kendoGrid");

    grid.removeRow($tr);
});

演示版

使用数据源的remove()：

$("#grid").on("click", "button.remove", function() {
    var $tr = $(this).closest("tr"),
        grid = $("#grid").data("kendoGrid"),
        dataItem = grid.dataItem($tr);

    grid.dataSource.remove(dataItem);
});

演示版