Kendo UI 自定义网格弹窗编辑器 window 只打开一次

Question

我想使用自定义 window 作为 Kendo UI Grid 的弹出式编辑器。 它的内容将很复杂，包含搜索字段和显示搜索结果的网格。 为此，我不想使用 Kendo 模板机制，而是使用真正的弹出窗口 window。

在使用自定义编辑器进行测试时，我遇到了一个问题。 即使是非常基本和简单的场景（只是创建命令），我也只能打开编辑器一次。 第二次出现错误时，编辑器不再显示，网格变空。

这是我的 HTML 代码：

<div id="main-content">

    <div id="custom-window">
    </div>

    <table id="my-table-grid">
    </table>

</div>

JavaScript部分：

function openCustomWindow(e) {
   e.preventDefault();
   myWindow.center().open();
}

function editorWindowClosed(e) {  
    myGrid.cancelRow(); 
}

var myWindow = $("#custom-window").kendoWindow({
            modal: true,
            resizable: false,
            title: "Test",
            visible: false,
            close: editorWindowClosed
        }).data("kendoWindow");

var dummyDataSource = new kendo.data.DataSource(
    {
        schema : {
            model : {
                id: "id",
                fields: {
                    postion: { type: "number"},
                    name: { type: "string"},
                }
            }
        }
    });

dummyDataSource.add({postion: 1, name: "gswin"});

var myGrid = $("#my-table-grid").kendoGrid({
                dataSource: dummyDataSource,
                toolbar: [ {
                    name: "create",
                    text: "Create"
                } ],
                editable: {
                    mode: "popup",
                    window: {
                        animation: false,
                        open: openCustomWindow,
                    }
                },
                columns: [
                    {
                        field: "postion",
                        title: "Postion"
                    },
                    {
                        field: "name",
                        title: "Name"
                    }
               ]
            }).data("kendoGrid");

JavaScript控制台报错信息：

未捕获的 TypeError：无法读取 undefinedut.ui.DataBoundWidget.extend.cancelRow 的属性“uid”@kendo.all.min.js:29ut.ui.DataBoundWidget.extend.addRow @kendo.all.min.js:29（匿名函数) @kendo.all.min.js:29jQuery.event.dispatch @jquery-2.1.3.js:4430jQuery.event.add.elemData.handle @jquery-2.1.3.js:4116

最后是一个jsfiddle 链接来展示我在做什么。 （弹出窗口是空的，因为我只想在继续之前修复打开/关闭机制）

我不明白为什么会出现此错误，我希望能够根据需要多次打开/关闭弹出窗口。 默认的编辑器弹出窗口工作正常。

Answer 1

我的一位同事找到了解决方案（感谢他）。

其实这段代码

        editable: {
            mode: "popup",
            window: {
                animation: false,
                open: openCustomWindow,
            }
        }

旨在配置默认弹出窗口...

使用自定义弹出窗口的正确方法如下：

       editable :true,
       edit: openCustomWindow,

通过这种方法，最好也使用

function editorWindowClosed(e) {  
    myGrid.cancelChanges(); 
}

代替

function editorWindowClosed(e) {  
    myGrid.cancelRow(); 
}

工作jsfiddle链接

Answer 2

实际上，我先前的答案中的方法解决了我的问题，但又导致了另一个问题。 网格变为可编辑状态，但处于默认模式（“内联”）。

这样做

editable: "popup",
edit: openCustomWindow

已解决此其他问题，但现在显示2个弹出窗口。

我终于成功地隐藏了默认弹出窗口，只显示了我的自定义弹出窗口，但是它以最初的问题中描述的原始问题结束了...

考虑到所有这些信息，我得出的结论是，使用自定义弹出窗口绝对不是一种选择。 我将开始使用teamplates。

另一个解决方案是使用模板通过自定义的“添加”按钮覆盖工具栏，并使用自定义命令进行编辑。 但是在这一点上，我认为这太“棘手”了。

Answer 3

为了防止 Kendo UI 自定义网格弹出编辑器 window，定义 editable 属性：

editable: 
    {
        mode: "popup",
        window: {               
            animation: false,
            open: updateRowEventHandler
        }
    } // skip edit property

然后将 preventDefault() 粘贴到处理程序的开头：

function updateRowEventHandler(e) {
     e.preventDefault(); //