javascript 剑道网格等效于 onEditComplete
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16473777/
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
Kendo Grid equivalent of onEditComplete
提问by l46kok
Is there an event equivalent to onEditComplete for Kendo Grid where the event fires only after the content of the cell has been edited?
是否有与 Kendo Grid 的 onEditComplete 等效的事件，其中该事件仅在单元格内容被编辑后触发？
Documentationmentions "edit" event, but this fires as soon as the cell goes into edit mode (So this is equivalent to onBeginEdit).
文档提到了“编辑”事件，但是只要单元格进入编辑模式就会触发（所以这相当于 onBeginEdit）。
The closest event with the desired behavior I found was the "save" event, but this event only fires when the content of the cell has been changed. I want an event that fires as soon as the cell goes out of the edit mode.
我发现的具有所需行为的最接近的事件是“保存”事件，但该事件仅在单元格的内容发生更改时触发。我想要一个在单元格退出编辑模式后立即触发的事件。
The grid's editmode is set to incell.
网格的编辑模式设置为 incell。
采纳答案by Quinton Bernhardt
So due to the comment i've removed my previous answer - using the blur event on the input boxes (or other elements) seems to work :
因此，由于评论我删除了我之前的答案 - 在输入框（或其他元素）上使用模糊事件似乎有效：
On the grid.edit event, use jquery to bind to the textbox (or any other inline edit control)'s blur event which is fired when focus is lost. Append this to the grid definition...and obviously replace the alert with your code.
在 grid.edit 事件上，使用 jquery 绑定到文本框（或任何其他内联编辑控件）的模糊事件，该事件在失去焦点时触发。将其附加到网格定义中……并且显然用您的代码替换警报。
edit: function (e) {
alert('Edit Fired');
$('input.k-input.k-textbox').blur(function () {
alert('blur event called');
});
},
I've tested this by modifying the sample inline edit code here
我已经通过在此处修改示例内联编辑代码对此进行了测试
My full local source of the edit - see only the edit event on the grid def:
我完整的本地编辑源 - 仅查看网格定义上的编辑事件：
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/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: 430,
toolbar: ["create"],
// added in hook to here to bind to edit element events.
// blur is fired when an element loses focus
edit: function (e) {
alert('Edit Fired');
$('input.k-input.k-textbox').blur(function (e) {
alert('blur event called');
});
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "172px" }],
editable: "inline"
});
});
</script>
</div>
回答by zomf
回答by user23031988
Why are you not using the "blur" event?
为什么不使用“blur”事件？
http://www.kendoui.com/forums/ui/window/possible-to-close-window-when-it-loses-focus-.aspx
http://www.kendoui.com/forums/ui/window/possible-to-close-window-when-it-loses-focus-.aspx
$("#window").blur(function(){
if ($(document.activeElement).closest(".k-window").length == 0) {
$("#window").data("kendoWindow").close();
}
});
回答by user23031988
Have you tried the Change Event
您是否尝试过更改事件
"change
“改变
Fired when the user selects a table row or cell in the grid."
当用户在网格中选择表格行或单元格时触发。”
Example - get the selected data item(s) when using cell selection
示例 - 使用单元格选择时获取选定的数据项
<div id="grid"></div>
<script>
function grid_change(e) {
var selectedCells = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedCells.length; i++) {
var dataItem = this.dataItem(selectedCells[i].parentNode);
if ($.inArray(dataItem, selectedDataItems) < 0) {
selectedDataItems.push(dataItem);
}
}
// selectedDataItems contains all selected data items
}
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
selectable: "multiple, cell"
});
var grid = $("#grid").data("kendoGrid");
grid.bind("change", grid_change);
</script>
