使用jQuery從Kendo UI Grid中刪除行

我正在使用Kendo UI網格並用於刪除行我正在使用自定義按鈕和自舉，當我點擊它時，使用ajax我調用web api方法來刪除該行並且如果它被成功刪除，則該行將其從DOM中刪除。（我不使用命令破壞劍道）使用jQuery從Kendo UI Grid中刪除行

我遇到的問題是，如果我嘗試過濾那個被刪除的行，它會再次出現在網格中，它似乎根本沒有被刪除。

這是我的劍道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做類似的事情？

來源

2017-09-25 Juan José

可能的重複[如何從Kendo網格刪除一行]（https://stackoverflow.com/questions/31183593/how-do-i-remove-a-row-from-a-kendo-grid） –

您需要在上面的重複鏈接中使用'dataSource.remove（dataItem）;' - 示例。更多示例在這裏：https://stackoverflow.com/search?q=remove+row+from+kendo+grid –

永遠不要玩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

來源

2017-09-25 14:05:16 DontVoteMeDown

謝謝你的人！我閱讀了Kendo網格的文檔，但是這種例子對我來說更加清楚。 –

使用jQuery從Kendo UI Grid中刪除行

回答

相關問題