2014-10-07 3 views
1

У меня есть настраиваемый шаблон редактора всплывающих окон для моей сетки Kendo, содержащий вкладки. Одна из вкладок состоит в том, чтобы иметь вторую сетку Кендо записей, относящихся к редактируемой записи.Kendo Grid: сохранить пользовательское всплывающее окно после сохранения новой записи

Я хотел бы иметь возможность создать новую запись и сразу же начать добавлять связанные записи, не заново открывая вновь созданную запись. Очевидно, что я должен сначала сохранить запись, чтобы ее идентификатор был сгенерирован.

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

Есть ли способ переустановить окно модели, чтобы я мог продолжить редактирование и добавление связанных записей?

Благодаря

Edit: Вот метод для сохранения редактора разомкнут:

отредактировать сетку и сохранить события:

edit: function(e){ 
    var editWindow = this.editable.element.data("kendoWindow"); 
    editWindow.bind("close", onWindowEditClose); 
}, 
save: function(e){ 
    if (e.model.isNew()) { 
     preventCloseOnSave = true; 
    } else { 
     preventCloseOnSave = false; 
    } 
} 

onWindowEditClose:

var onWindowEditClose = function(e) {' 
    if (preventCloseOnSave) { 
     e.preventDefault(); 
     preventCloseOnSave = false; 
    } 
}; 
+0

Можете ли вы поделиться кодом или снимком U U? – Dhwani

+0

Привет. Там не так много шоу. На этом этапе это довольно простая сетка. Он просто использует настраиваемый всплывающий редактор, но это довольно неуместно. Я добавил фрагменты кода, чтобы показать, как я препятствую закрытию редактора, но теперь я думаю, что другой подход будет лучше. – Mat

+0

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

ответ

0

Об одном концептуальный уровень, вы можете перехватить действие POST, которое сохраняет запись t o базу данных и вернуть сохраненные данные. Обратите внимание, что ваше действие POST должно вернуть сохраненный объект (как ожидается). Вы можете подключиться к этому событию с помощью метода requestEnd объекта Datasource Kendo UI, который поддерживает вашу сетку и привязывает сохраненную запись к вашему окну редактирования (если у вас есть ссылка на него).

var ds = new kendo.data.DataSource({ 
    // ... 
    requestEnd: function (e) { 
    kendo.bind(editWindow, e.response); // bind the returned data to your edit window 
    } 
}); 
1

Я закончил тем, что использовал немного неуклюжие обходные пути, но кроме незначительной UI-вспышки, он работает нормально.

В Grid есть строкаTemplate, поэтому я добавил поле идентификатора записи в теги TR, чтобы найти их по ID. Я тогда есть функция, которая выполняется на complete случае, когда создается новая запись, которая находит новую строку и сразу же открывает его:

var ds = new kendo.data.DataSource({ 
    // ... 
    transport: { 
    create: { 
     url: '/url/to/create', 
     dataType: 'json', 
     type: 'post', 
     complete: recordCreated 
    } 
}); 

function recordCreated(e) { 
    "use strict"; 
    var id = e.responseJSON.data[0].id, 
    grid = $('#grid').data("kendoGrid"), 
    row = grid.tbody.find("tr[data-id='" + id + "']"); 
    grid.editRow(row); 
} 
0

Понимание структуры кендо UI (который может быть утомительным время от времени) является важно, чтобы с ним что-то было сделано. Закрытие всплывающего окна, которое позволяет вставить, выполняется в событии dataBinding. Таким образом, это то место, где нам необходимо его предотвратить:

 $("#yourgrid").kendoGrid({ 
     dataSource: yourDataSource, 
     columns: [ 
      { field: "YouColumn", title: "YourTitle", ... }, 
      ... 
      ] 
      . 
      . 
      .    
     editable: "popup", 
     dataBinding: function(e){ 
      //this is the key to keeping the popup open 
      e.preventDefault(); 
     }, 
     save: function (e) { 
      //whatever you need to do here 
     } 
     . 
     . 
     . 
    }); 

Надеюсь, это кому-то поможет.

// Houdini

Смежные вопросы