Question

我使用asp.net web api将数据读入我的kendo网格。当用户单击单元格时，它将更改为编辑模式。我想要实现的是，当它改变为编辑模式时，它也应该从后端获得最新记录。是否有可能通过某些方式：

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

Answer 1

这可以做你想要的，但请记住，尽管你从服务器获取数据，但请记住我在你的问题评论中所说的内容：

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

说，这就是：

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

这是代码：

$("#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>

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

1 个答案: