剑道网格相当于 onEditComplete
Posted
技术标签:
【中文标题】剑道网格相当于 onEditComplete【英文标题】：Kendo Grid equivalent of onEditComplete 【发布时间】：2013-05-04 15:17:51 【问题描述】：是否存在与 Kendo Grid 的 onEditComplete 等效的事件，该事件仅在单元格内容被编辑后触发？
Documentation 提到了“编辑”事件，但是一旦单元格进入编辑模式就会触发（所以这相当于 onBeginEdit）。
我找到的具有所需行为的最接近的事件是“保存”事件，但此事件仅在单元格内容发生更改时触发。我想要一个在单元格退出编辑模式后立即触发的事件。
网格的编辑模式设置为 incell。
【问题讨论】：
由于这个问题似乎已经开放三年了，而且 Telerik 没有提供官方解决方案 - 您是否在 Telerik 提出了功能请求？网格中有一个“itemChange”事件，但它没有记录，也没有告诉你列名。 【参考方案1】：使用Save 事件
（当焦点移到正在编辑的单元格之外时触发，并且 在单元格关闭之前）
http://www.kendoui.com/forums/kendo-ui-web/grid/is-there-an-event-that-first-after-a-user-edits-a-cell-but-before-they-save-in-a-grid-with-batch-edit-and-incell-editing-.aspx.
【讨论】：
【参考方案2】：因此，由于评论，我删除了我之前的答案 - 在输入框（或其他元素）上使用 blur 事件似乎有效：
在 grid.edit 事件上，使用 jquery 绑定到文本框（或任何其他内联编辑控件）的 blur 事件，该事件在失去焦点时触发。将此附加到网格定义中......显然用您的代码替换警报。
edit: function (e)
alert('Edit Fired');
$('input.k-input.k-textbox').blur(function ()
alert('blur event called');
);
,
我已经通过修改示例内联编辑代码here对此进行了测试
我的完整本地编辑源 - 仅查看网格定义上的编辑事件：
<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>
【讨论】：
我远程绑定了数据源，使用它意味着当数据源本身发生变化时会触发事件。我希望数据源完好无损，如果单元格退出编辑模式，我实际上只需要触发事件。 我设法挂钩了文本框上的模糊事件，该事件仅在文本框失去焦点时触发 - 我已经测试过。如果您想挂接到文本框以外的任何其他元素，只需更改 grid.edit 事件代码中的 jquery 选择器 - 请参阅我的编辑【参考方案3】：你为什么不使用“模糊”事件？
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();
);
http://api.jquery.com/blur/
【讨论】：
据我所知，没有像“onEditComplete”这样的事件。但是您可以使用 css 选择器获取元素并设置模糊功能。这： ".k-grid-content>table>tbody>tr>td" 将是 demos.kendoui.com/web/grid/editing-custom.html 的 css 选择器【参考方案4】：你试过Change Event
"改变
当用户在网格中选择表格行或单元格时触发。"
示例 - 使用单元格选择时获取选定的数据项
<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>
【讨论】：
再次，正如 OP 中明确指定的那样，我需要一个在单元格上完成编辑时触发的事件。您的建议或多或少类似于 onBeginEdit。我需要的是 onEditComplete。以上是关于剑道网格相当于 onEditComplete的主要内容，如果未能解决你的问题，请参考以下文章