javascript 如何在 KendoGrid 内联编辑模式下覆盖默认更新事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27398260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override default update event in KendoGrid inline edit mode
提问by Damith
Is there a any way to capture update event which dynamically generate in inline edit mode. I tried with edit and cancel commands and it worked successfully. I went through this exampleand it worked with cancel command. Any help would be greatly appreciated.
有什么方法可以捕获在线编辑模式下动态生成的更新事件。我尝试使用编辑和取消命令，并且成功运行。我经历了这个例子，它与取消命令一起工作。任何帮助将不胜感激。
回答by OnaBai
Depending on when exactly you want to intercept the event.
取决于您想要拦截事件的确切时间。
I would recommend you using saveevent. This event is fired when you a record is going to be saved and before exiting inlineedition mode.
我建议你使用save事件。当您要保存记录且在退出inline编辑模式之前会触发此事件。
The definition would be something like (note that Saveis defined in the Eventssection of the Griddefinition):
定义类似于（注意Save在定义Events部分中Grid定义）：
@(Html.Kendo().Grid(Model).DataSource(dataSource => ...)
.Columns(columns => ...)
.Editable(editing => ...)
.Events(events => events.DataBound("onGridDataBound")
.Save("onGridSave")
.Edit("onGridEdit")
.Change("onGridChange")
)
)
The following code snippet shows the saveevent (using JavaScript)
以下代码片段显示了save事件（使用 JavaScript）
$(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");
}
});
});<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>