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

Question

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

我已经尝试了events.Edit（“onGridEdit”），然后在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; } .ki-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/