javascript - 剑道网格相当于 onEditComplete

Question

是否存在与 Kendo Grid 的 onEditComplete 等效的事件，其中该事件仅在单元格内容被编辑后触发？

文档提到“编辑”事件，但是一旦单元格进入编辑模式就会触发（所以这相当于 onBeginEdit）。

我发现的具有所需行为的最接近的事件是“保存”事件，但该事件仅在单元格的内容发生更改时触发。我想要一个在单元格退出编辑模式后立即触发的事件。

网格的编辑模式设置为 incell。

Answer 1

使用保存事件

（当焦点移到正在编辑的单元格之外并且在单元格关闭之前触发）

http://www.kendoui.c​​om/forums/kendo-ui-web/grid/is-there-an-event-that-first-after-a-user-edits-a-cell-but-before-they-用批处理编辑和单元格编辑-.aspx 保存在网格中。

Answer 2

所以由于评论我已经删除了我之前的答案 - 在输入框（或其他元素）上使用 blur 事件似乎有效：

在 grid.edit 事件上，使用 jquery 绑定到文本框（或任何其他内联编辑控件）的 blur 事件，该事件在失去焦点时触发。将此附加到网格定义......显然用您的代码替换警报。

edit: function (e) {
        alert('Edit Fired');
        $('input.k-input.k-textbox').blur(function () {
            alert('blur event called');
        });
    },

我通过在此处修改示例内联编辑代码对此进行了测试

我的完整本地编辑源 - 仅查看网格定义上的编辑事件：

<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: "&nbsp;", width: "172px" }],
                editable: "inline"
            });
        });
    </script>
</div>

Answer 3

你为什么不使用“模糊”事件？

http://www.kendoui.c​​om/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/

Answer 4

您是否尝试过更改事件

“改变

当用户在网格中选择表格行或单元格时触发。”

示例 - 使用单元格选择时获取选定的数据项

<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>