如何在显示Kendo网格的弹出编辑器窗口之前获得确认？

Question

当用户点击编辑命令时，我想在用户确认后才显示弹出编辑器窗口。实际上，我在编辑器中显示报告，我想在显示此报告之前得到用户的确认。

我已经尝试过events.Edit（＆＃34; onGridEdit＆＃34;）然后在onGridEdit（e）javascript函数尝试如下：

if (!confirm('Are you sure you want to buy this report ')) {
        e.preventDefault();            
    }

但它不起作用。它显示确认对话框，但也打开编辑器窗口。

有什么建议吗？

Answer 1

我暂时会在这个答案的中途见到你。

以下示例使用自定义命令和闭包（变量和嵌套函数）绑定到window.wrapper中的按钮单击事件。

var sharedDataSource = new kendo.data.DataSource(
    {
        pageSize: 20,
        data: [
            {"id": 0, "first" : "George", "last" : "Washingon", "ATK" : 9000, "DEF" : 500},
            {"id": 1, "first" : "John", "last" : "Adams", "ATK" : 50, "DEF" : 5000},
            {"id": 2, "first" : "Thomas", "last" : "Jefferson",  "ATK" : 100, "DEF" : 5000}
        ],
        autoSync: true,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: false },
                    first: { validation: { required: true } },
                    last: { validation: { required: true } },
                    ATK: { type: "number", validation: { required: true, min: 1}},
                    DEF: { type: "number", validation: { required: true, min: 1}}
                }
            }
        }
    });
    
var grid = $("#grid").kendoGrid({
    dataSource: sharedDataSource,
    pageable: true,
    height: 550,
    editable: "inline",
    columns: [
        { field: "first", title: "First"},
        { field: "last", title: "Last"},
        { field: "ATK", title: "Attack"},
        { field: "DEF", title: "Defense"},
        { command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }
    ]
});


var wnd = $("#details").kendoWindow({
    title: "Customer Details",
    modal: true,
    visible: false,
    resizable: false,
    width: 300
}).data("kendoWindow");


var detailsTemplate = kendo.template($("#template").html());




function showDetails(eArg) {  
    console.clear();
    eArg.preventDefault();
    
    var dataItem = this.dataItem($(eArg.currentTarget).closest("tr"));
    console.log(dataItem);
    dataItem._self = JSON.stringify(dataItem);
    wnd.content(detailsTemplate(dataItem));
    wnd.wrapper.find("button.btn-confirm").click(confirmed.bind(null, wnd));
    wnd.wrapper.find("button.btn-cancel").click(cancel.bind(null, wnd));
    wnd.center().open();
    
   function confirmed(e)
   {
       console.log("Confirmed");
       wnd.close();       
       console.log(eArg);
       console.log(e);
       console.log(grid);
       console.log(dataItem.parent());
       dataItem._events.change[0](dataItem);
   }

   function cancel(e)
   {
       console.log("Cancel");
       wnd.close();
   }
}

#details-container
                {
                    padding: 10px;
    background-color:blue;
                }

                #details-container h2
                {
                    margin: 0;
                }

                #details-container
                {
                    color: #8c8c8c;
                }

                #details-container dt
                {
                    margin:0;
                    display: inline;
                }
.k-i-close {background-color:white;content: 'X'};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="Stylesheet" />

<div id="grid"></div>
<div id="details"></div>
<script type="text/x-kendo-template" id="template">    
    <div id="details-container">
        <h2>#= first # #= last #</h2>
        <dl>
            <dt>Attack: #= ATK #</dt>
            <dt>Defense: #= DEF #</dt>
        </dl>
        <button class="btn-confirm">Confirm</button>
        <button class="btn-cancel">Confirm</button>
    </div>
</script>

http://jsfiddle.net/mzq4sxot/