如何在KendoGrid内联编辑模式中覆盖默认更新事件

Question

是否有任何方法可以捕获以内联编辑模式动态生成的更新事件。我试过编辑和取消命令，它成功地工作。我经历了这个example并使用了取消命令。任何帮助将不胜感激。

Answer 1

取决于您何时想要截取事件。

我建议你使用save事件。当您要保存记录时以及退出inline版本模式之前，将触发此事件。

定义类似（请注意Save定义的Events部分中定义了Grid）：

@(Html.Kendo().Grid(Model).DataSource(dataSource => ...)
                          .Columns(columns => ...)
                          .Editable(editing => ...)
                          .Events(events => events.DataBound("onGridDataBound")
                                                  .Save("onGridSave")
                                                  .Edit("onGridEdit")
                                                  .Change("onGridChange")
                          )
            )

以下代码段显示了save事件（使用JavaScript）

＆＃13;

＆＃13;

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

  $("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 550,
    toolbar: ["create"],
    columns: [
      "ProductName",
      { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
      { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
      { field: "Discontinued", width: "120px" },
      { command: ["edit", "destroy"], title: " ", width: "250px" }],
    editable: "inline",
    save: function(e) {
      alert("Saving");
    }
  });
});

＆＃13;

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

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

＆＃13;

＆＃13;

＆＃13;