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

Question

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.

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.

Here is my HTML code:

<div id="main-content">

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

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

</div>

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");

The error message in the JavaScript console:

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

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.

Answer 1

One of my colleague found the solution (thanks to him).

Actually this piece of code

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

is designed to configure the default popup...

The right way to use a custom popup is the following :

       editable :true,
       edit: openCustomWindow,

With this approach it's also better to use

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

Instead of

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

Working jsfiddle link

Answer 2

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").

Doing this

editable: "popup",
edit: openCustomWindow

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...

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".

Answer 3

To prevent Kendo UI custom grid popup editor window, define the editable property:

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

Then paste preventDefault() at the beginning of the handler:

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