Kendo Grid：保存新记录后保持自定义弹出窗口打开答案

【问题标题】：Kendo Grid: Keep custom popup open after save new recordKendo Grid：保存新记录后保持自定义弹出窗口打开
【发布时间】：2014-10-07 08:33:53
【问题描述】：

我的 Kendo Grid 有一个自定义弹出编辑器模板，其中包含选项卡。其中一个选项卡是拥有与正在编辑的记录相关的第二个 Kendo Grid 记录。

我希望能够创建新记录并立即开始添加相关记录，而无需重新打开新创建的记录。显然，我必须先保存记录才能生成它的 ID。

我已经设法防止弹出编辑器在保存新记录时关闭，但我认为弹出窗口此时不再绑定到模型。

有没有办法将窗口重新绑定到模型，以便继续编辑和添加相关记录？

谢谢

编辑：以下是保持编辑器打开的技术：

网格的编辑和保存事件：

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;
    }
};

【问题讨论】：

你可以分享你的 UI 的代码或快照吗？
嗨。没有多少没戏。在这个阶段，这是一个非常简单的网格。它只是使用自定义弹出编辑器，但这无关紧要。我添加了代码 sn-ps 以显示我如何防止编辑器关闭，但我现在认为另一种方法会更好。
我想一个更好的主意是以编程方式创建一个新记录，然后在编辑模式下打开它。我正在使用远程数据源，现在我不确定我是否会这样做，但它会解决问题。

标签： kendo-ui kendo-grid

【解决方案1】：

我最终使用了一个有点笨拙的解决方法，但除了一个小的 UI 'flash' 之外，它工作正常。

Grid 有一个 rowTemplate，所以我将记录的 ID 字段添加到 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);
}

【讨论】：

【解决方案2】：

在概念层面上，您可以拦截将记录保存到数据库的 POST 操作，并在返回时获取保存的数据。请注意，您的 POST 操作必须返回保存的对象（如预期的那样）。您可以使用支持您的网格的 Kendo UI 数据源对象的 requestEnd 方法挂钩此事件，并将保存的记录绑定到您的编辑窗口（只要您有对它的引用）。

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

【讨论】：

【解决方案3】：

了解 kendo 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
        }
        .
        .
        .
    });

希望这对某人有所帮助。

//胡迪尼

【讨论】：