如何从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

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

  $("#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

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

您需要像这里一样在数据源上定义 destroy

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

您还可以打开删除确认

    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();
            }
        }
    }