剑道网格行删除确认

时间:2013-07-26 07:24:30

标签: jquery kendo-ui kendo-grid

嗨我有一个Kendo网格,每行都有删除按钮。当我点击删除按钮时,它要求确认“删除?​​”到这里很好。现在我想在点击是或现在时捕捉事件。

当我单击是时想要显示消息。当我点击“否”时,我想显示另一条消息。

如何在剑道捕捉这些事件?

4 个答案:

答案 0 :(得分:2)

UweB是正确的,你无法挂钩到destroy事件。在Kendo UI代码库中有一个示例用于滚动您自己的删除确认。

http://www.kendoui.com/code-library/web/grid/customize-the-delete-confirmation-dialog.aspx

链接代码示例使用Kendo Window,并为您提供了处理yes和no的click事件的方法。如果您只需要自定义删除消息,请参阅以下代码段:

$("#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 my favorite record?')) {
                        var dataSource = $("#grid").data("kendoGrid").dataSource;
                        dataSource.remove(dataItem);
                        dataSource.sync();
                    }
                }
            }], title: " ", width: "200px"
        }
    ]
});

答案 1 :(得分:1)

我不相信有可能抓住这些,破坏事件是内置的,并且“按原样”工作。

然而,有点击事件(http://docs.kendoui.com/api/web/grid#configuration-columns.command.click),您可以在其中创建一个自定义命令,显示您必须编写的确认对话框(例如可以使用内置{j}内置的confirm()看起来很漂亮,但现在可以工作了),你可以完全控制他们触发的按钮和事件。

答案 2 :(得分:0)

我同意UweB,没有办法抓住这样的事件。理想情况下,使用KendoWindow自己进行删除对话,您将获得更多自由并看起来像页面UI。

请尝试以下操作:http://jsfiddle.net/vojtiik/KZ6pj/8/

添加命令:

 command: [{
            name: "delete",
            text: "delete",
            click: _handleDelete,
            imageClass: "ui-icon ui-icon-close"
        }],

捕获所选项目并将控件传递给窗口:

  function _handleDelete(event) {
        dataitem = grid.dataItem($(event.currentTarget).closest("tr"));
        kWindow.open();
    }; 

做你的东西并删除:

   $('.yesbtn').click(function () {
        console.log('My message');
        grid.dataSource.remove(dataitem);  
        kWindow.close();
    });

答案 3 :(得分:0)

我尝试了上面的所有例子都无法解决它。 很简单

//Add this line of code to the grid
   columns.Command(command => command.Custom("Remove").Click("removeItem"));
   //Java script function to remove
       function removeItem(e) {
        //Get the instance of the grid
        var grid = $("#grid").data("kendoGrid");
        //Get the selected grid
        var tr = $(e.target).closest("tr");
        //Get the item from the grid
        var data = this.dataItem(tr);
        //Remove the item from the datasource
        grid.dataSource.remove(data);
        //Sync it with the grid
        dataSource.sync();
   }