如何从Kendo Grid中删除一行

Question

我有一个非常简单的设置，一个名为#list的网格，其中一个数据源填充了要显示的记录。

我在每一行都有一个按钮，其中有一个调用此函数的onClick事件：

    // Soft-Delete person
    var processURL = crudServiceBaseUrl + '?method=deletePerson';
    function deletePerson(id){
        if (confirm('#getResource("person.detail.confirmdel")#')) {
            $.ajax({
                type: 'POST',
                url: processURL,
                data: {
                    PERS_KY: id
                },
                success: function (data){
                    var thingToDelete = "tr:eq("+id+")";
                    var grid = $("#list").data("kendoGrid");
                    grid.removeRow(thingToDelete);
                },
                error: function (xhr, textStatus, errorThrown){
                    alert("Error while deleting person"+ "\n"+ xhr + "\n"+ textStatus + "\n" + errorThrown);
                }
            });
        }
    }

The server-side stuff works fine, the interaction with the database is good. However, the row does not disappear from the grid.

Anyone?

==============================================================================

In answer to the comments below, here is the revised function:

var processURL = crudServiceBaseUrl + '?method=deletePerson';
function deletePerson(id, row){
    if (confirm('#getResource("person.detail.confirmdel")#')) {
        $.ajax({
            type: 'POST',
            url: processURL,
            data: {
                PERS_KY: id
            },
            success: function (data){
                var thingToDelete = row;
                var grid = $("#list").data("kendoGrid");
                grid.removeRow(thingToDelete);
            },
            error: function (xhr, textStatus, errorThrown){
                alert("Error while soft-deleting person"+ "\n"+ xhr + "\n"+ textStatus + "\n" + errorThrown);
            }
        });
    }
}

一切正常，数据库已填充，grid.removeRow（）使行淡出，但页面重新加载，这是我不想要的。

知道如何停止重新加载页面吗？

Answer 1

下面的代码显示了如何使用自定义删除命令删除行。

employees

希望这可能会有所帮助

Answer 2

网格已支持创建，更新和删除记录。你不应该试图自己实现它。

您需要在数据源上定义destroy，如here

transport: {
    read:  {
             url: crudServiceBaseUrl + "/Products",
    },
    destroy: {
               url: crudServiceBaseUrl + "/Products/Destroy",
    }
}

您也可以开启删除confirmation

    editable: {
     confirmation: "Are you sure that you want to delete this record?"
   }

修改 为了有条件地显示删除按钮，您可以连接网格的DataBound-Event。您还需要一些指示或不显示按钮。我在我的例子中使用了一个名为HideButton的属性。也许你必须调整类.k-grid-delete其余应该可以工作。

$("#grid").kendoGrid({
         ... other configuration ...
         dataBound: onDataBound
});

function onDataBound(e) {
        var grid = this;
        var ds = grid.dataSource;
        var max = ds.data().length;
        for (var i = 0; i < max; i++) {
            var currentUid = ds.at([i]).uid;
            var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
            if (ds.at(i).HideButton) {
                var editButton = $(currentRow).find(".k-grid-delete");
                editButton.hide();
            }
        }
    }

Answer 3

使用 kendo ui 删除行的其他方法

    $("#grid").kendoGrid({
        columns: [
        {       
            command: [
            {
             name: "remove",
              text: '',
              iconClass : 'k-icon k-i-delete',
              
              click: (e) => {
                e.preventDefault();
                const row = $(e.target).closest('tr')[0];
    
                const grid = $(e.target).closest('#grid').data("kendoGrid");
                grid.removeRow(row);
                //grid.saveChanges(); //if you need to immediately push changes on the server 
              }
             },
         
    ]
    });