Kendo UI自定义网格弹出编辑器窗口仅打开一次 [英] Kendo UI custom grid popup editor window only opens once
问题描述
我想使用自定义窗口作为Kendo UI网格的弹出编辑器.它的内容将很复杂，带有搜索字段和显示搜索结果的网格.为此，我不想使用Kendo模板机制，而是要使用真正的弹出窗口.
I would like to use a custom window as popup editor of a Kendo UI Grid. Its content will be complex with search fields and a grid to display search results. To do that, I don't want to use the Kendo template mechanism but a real popup window.
在使用自定义编辑器进行测试时，我遇到了一个问题.即使是非常基本和简单的场景(仅是create命令)，我也只能打开一次编辑器.第二次出现错误时，编辑器不再显示，并且网格变为空.
While doing tests with custom editor I faced an issue. Even with a very basic and simple scenario (just the create command), I'm only able to open the editor once. The second time I get an error, the editor doesn't show up anymore and the grid becomes empty.
这是我的HTML代码:
Here is my HTML code :
<div id="main-content">
<div id="custom-window">
</div>
<table id="my-table-grid">
</table>
</div>
JavaScript部分:
The JavaScript part :
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控制台中的错误消息:
The error message in the JavaScript console :
未捕获的TypeError:无法读取的属性'uid' undefinedut.ui.DataBoundWidget.extend.cancelRow @ 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
Uncaught TypeError: Cannot read property 'uid' of undefinedut.ui.DataBoundWidget.extend.cancelRow @ kendo.all.min.js:29ut.ui.DataBoundWidget.extend.addRow @ kendo.all.min.js:29(anonymous function) @ kendo.all.min.js:29jQuery.event.dispatch @ jquery-2.1.3.js:4430jQuery.event.add.elemData.handle @ jquery-2.1.3.js:4116
最后是 jsfiddle链接，以显示我在做什么. (弹出窗口为空，因为我只想在进一步操作之前修复打开/关闭机制)
And finally a jsfiddle link to show what I'm doing. (The popup is empty because I just want to fix the open / close mechanism before going any further)
我不明白为什么会出现此错误，我希望能够根据需要多次打开/关闭弹出窗口.默认的编辑器弹出窗口运行正常.
I don't understand why I get this error, I expected to be able to open / close the popup as many time as I wanted. The default editor popup is working fine.
推荐答案
实际上，我上一个答案中的方法解决了我的问题，但又导致了另一个问题.网格变为可编辑状态，但处于默认模式(内联").
Actually the approach in my previous answer solved my issue but is causing another issue. The grid becomes editable but in the default mode (which is "inline").
这样做
editable: "popup",
edit: openCustomWindow
已解决了另一个问题，但现在显示2个弹出窗口.
has fixed this other issue but is now displaying 2 popups.
我终于成功地隐藏了默认弹出窗口，只显示了我的自定义弹出窗口，但是最后出现了最初问题中描述的原始问题...
I finally succeeded to hide the default popup and only show my custom popup but it ended with the orginal issue described in initial question...
考虑到所有这些信息，我得出的结论是，使用自定义弹出窗口绝对不是一种选择.我将开始使用teamplates.
Considering all those informations I arrived to the conclusion that working with a custom popup window is definitely not an option. I'll start working with teamplates instead.
另一种解决方案是使用模板通过自定义的添加"按钮覆盖工具栏，并使用自定义命令进行编辑.但是在这一点上，我认为这太棘手"了.
Another solution would have been to use a template to override the toolbar with a custom "Add" button and use a custom command for edition. But at this point I consider that too "tricky".
这篇关于Kendo UI自定义网格弹出编辑器窗口仅打开一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
