Окно редактора контекстного меню Kendo UI открывается только один раз

Question

Я хотел бы использовать пользовательское окно в качестве всплывающего редактора сетки пользовательского интерфейса Kendo. Его содержимое будет сложным с полями поиска и сеткой для отображения результатов поиска. Для этого я не хочу использовать механизм шаблона Kendo, но реальное всплывающее окно.

Выполняя тесты с помощью специального редактора, я столкнулся с проблемой. Даже с очень простым и простым сценарием (только командой create), я могу только открыть редактор один раз. Во второй раз, когда я получаю сообщение об ошибке, редактор больше не появляется, и сетка становится пустой.

Вот мой 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:

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 link, чтобы показать, что Я делаю. (Всплывающее окно пуст, потому что я просто хочу исправить механизм открытия/закрытия, прежде чем продолжить)

Я не понимаю, почему я получаю эту ошибку, я ожидал, что вы сможете открыть/закрыть всплывающее окно столько раз как я и хотел. Всплывающее окно редактора по умолчанию работает нормально.

Answer 1

На самом деле подход в моем предыдущем ответе решить мою проблему, но вызывает другой вопрос. Сетка становится редактируемой, но в режиме по умолчанию (которая является «встроенной»).

Выполнение этого

editable: "popup", 
edit: openCustomWindow 

зафиксировала этот другой вопрос, но в настоящее время отображения 2 всплывающих окон.

я, наконец, удалось скрыть всплывающее окно по умолчанию и только показать свой собственный всплывающее окно, но оно закончилось первоначально проблемы, описанной в первоначальный вопрос ...

Принимая во внимание все эти информации я прибыл к выводу, что работа с таможней всплывающее окно, безусловно, не вариант. Вместо этого я начну работать с командами.

Другим решением было бы использовать шаблон для переопределения панели инструментов с помощью специальной кнопки «Добавить» и использования специальной команды для выпуска. Но на данный момент я считаю, что это слишком «сложно».

Answer 2

Один из моих коллег нашел решение (спасибо ему).

На самом деле этот кусок кода

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

предназначен для настройки всплывающего окна по умолчанию ...

Правильный способ использования пользовательского всплывающего окна является следующее:

 editable :true, 
     edit: openCustomWindow, 

С этот подход также лучше использовать

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

Вместо

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

Работа jsfiddle link