如何在剑道网格中读取单个记录

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>