Kendo网格行内编辑时，点击单元格外部的触发事件如何捕获？

针对编辑NumericStepper单元格后点击外部触发保存并出现dirty flag的场景，以下几种方法可以捕获该触发事件：

1. 利用Grid的save事件 #

点击外部触发数据保存时，Grid会自动触发save事件，可在事件中判断行内编辑模式并处理逻辑：

$("#grid").kendoGrid({
  editable: "incell",
  // 其他Grid配置项
  save: function(e) {
    if (this.editable.mode === "incell") {
      // 此处为点击外部触发保存时的处理代码
      console.log("点击外部完成单元格保存，dirty flag已标记");
      console.log("编辑字段：", e.field);
      console.log("更新后的值：", e.values[e.field]);
    }
  }
});

2. 绑定NumericTextBox的blur事件 #

编辑控件为NumericStepper（底层是NumericTextBox），可在Grid的edit事件中获取控件并绑定blur事件监听失去焦点（点击外部）：

$("#grid").kendoGrid({
  editable: "incell",
  // 其他Grid配置项
  edit: function(e) {
    const numericBox = e.container.find("[data-role='numerictextbox']").data("kendoNumericTextBox");
    if (numericBox) {
      numericBox.element.on("blur", () => {
        // 延迟执行，确保Grid完成保存和dirty标记更新
        setTimeout(() => {
          console.log("NumericStepper失去焦点（点击外部），数据已保存");
          const currentRowData = e.model;
          console.log("当前行数据：", currentRowData);
          console.log("是否为脏数据：", currentRowData.dirty);
        }, 100);
      });
    }
  }
});

3. 使用Grid的cellClose事件（需确认版本支持） #

部分新版本Kendo Grid提供cellClose事件，可直接捕获单元格编辑结束动作，通过e.action判断是否为点击外部（blur）触发：

$("#grid").kendoGrid({
  editable: "incell",
  // 其他Grid配置项
  cellClose: function(e) {
    if (e.action === "blur") {
      console.log("点击外部关闭单元格编辑，数据已保存");
      console.log("列索引：", e.columnIndex);
      console.log("当前行数据：", e.model);
    }
  }
});

若你的Kendo UI版本较旧，cellClose事件可能不存在，优先使用前两种方法。

内容的提问来源于stack exchange，提问作者Arvind Chourasiya