jquery - 如何在 Kendo Grid 中读取单个记录？

Question

我使用 asp.net web api 将数据读入我的剑道网格。当用户单击一个单元格时，它会更改为编辑模式。我想要实现的是，当它更改为编辑模式时，它还应该从后端获取最新记录。是否有可能通过以下方式：

 edit:function(e){ 
e.model.read();
}

Answer 1

这可以做您想做的事，但请记住，尽管您从服务器获取数据，但请记住我在对您的问题的评论中所说的话：

您是否意识到进入编辑模式后实际上会触发编辑事件？
无论您为刷新行做什么都意味着退出编辑模式，使用来自服务器的数据更新值，然后再次进入编辑模式。
并且拥有强大的实时背景我会问你：
* 如果这样做是服务器实际更新的时候呢？您无法确定...
* 更进一步，如果在您编辑行时更新了行怎么办？

说了这么多，就这样吧：

基本技巧是，如果您正在编辑单元格，因为用户单击了它，那么我将向服务器发送读取请求并取消编辑。作为新读取的结果，我将有一个新dataBound事件，我将询问这是否是强制读取的结果，如果是，我将进入同一单元格的编辑模式。

这是代码：

$("#grid").kendoGrid({
    editingCell: -1,
    dataSource: dataSource,
    columns: [
        ...
    ],
    editable: "incell",
    edit:function(e){
        if (this.options.editingCell >= 0) {
            this.options.editingCell = -1;
        } else {
            this.options.editingCell = this.tbody.find("td").index(e.container);
            this.dataSource.read();
            e.preventDefault();
        }
    },
    dataBound: function(e) {
        if (this.options.editingCell >= 0) {
            this.editCell($("#grid td:eq("+ this.options.editingCell + ")"));
        }
    }
});

以及下面的代码片段（说明，打开它两次并玩一个和另一个，你会看到当进入编辑模式时，它实际上被关闭，刷新和再次编辑）。请记住单击“保存更改”以将更改发送到服务器。

$(document).ready(function () {
  var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";
  var dataSource = new kendo.data.DataSource({
    transport: {
      read:  {
        url: crudServiceBaseUrl + "/Products",
        dataType: "jsonp",
        cache: false
      },
      update: {
        url: crudServiceBaseUrl + "/Products/Update",
        dataType: "jsonp"
      },
      parameterMap: function(options, operation) {
        if (operation !== "read" && options.models) {
          return {models: kendo.stringify(options.models)};
        }
      }
    },
    batch: true,
    pageSize: 5,
    schema: {
      model: {
        id: "ProductID",
        fields: {
          ProductID: { editable: false, nullable: true },
          ProductName: { validation: { required: true } },
          UnitsInStock: { type: "number", validation: { min: 0, required: true } }
        }
      }
    }
  });

  $("#grid").kendoGrid({
    editingCell: -1,
    dataSource: dataSource,
    pageable: {
      buttonCount : 2
    },
    toolbar: ["save"],
    columns: [
      "ProductName",
      { field: "UnitsInStock", title:"Stock", width: "120px" }
    ],
    editable: "incell",
    edit:function(e){
      console.log("edit", this.options.editingCell);
      if (this.options.editingCell >= 0) {
        this.options.editingCell = -1;
      } else {
        console.log("forceRead");
        this.options.editingCell = this.tbody.find("td").index(e.container);
        this.dataSource.read();
        e.preventDefault();
      }
    },
    dataBound: function(e) {
      if (this.options.editingCell >= 0) {
        this.editCell($("#grid td:eq("+ this.options.editingCell + ")"));
      }
    }
  });
});

#grid {
  width: 400px;
}

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<div id="grid"></div>