如何从Kendo网格中删除行

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

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

  $("#grid").kendoGrid({
        columns: [
            {
                command: [{ name: "edit" }, {
                    name: "Delete", imageClass: "k-icon k-i-close", click: function (e) {
                        e.preventDefault();
                        var dataItem = this.dataItem($(e.target).closest("tr"));
                        if (confirm('Do you really want to delete this record?')) {
                            var dataSource = $("#grid").data("kendoGrid").dataSource;
                            dataSource.remove(dataItem);
                            dataSource.sync();
                        }
                    }
                }], title: " ", width: "200px"
            }
        ]
    });

希望这能有所帮助

Answer 2

网格已经支持记录的创建、更新和删除。你不应该尝试自己去实现它。

您需要在数据源上定义销毁，如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 
              }
             },
         
    ]
    });