使用jQuery从Kendo UI Grid中删除行

Question

我正在使用Kendo UI网格并用于删除行我正在使用自定义按钮和自举，当我点击它时，使用ajax我调用web api方法来删除该行并且如果它被成功删除，则该行将其从DOM中删除。 （我不使用命令破坏剑道）

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

这是我的剑道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的数据表时，可以做这样的事情：

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

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

Answer 1

永远不要玩Kendo的小部件DOM。总是使用它的方法。

使用网格的removeRow()：

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

    grid.removeRow($tr); 
}); 

Demo

---

使用数据源的remove()：

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

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

Demo