如何点击关闭Kendo Grid编辑器模板？

当然有可行的实现方案！下面是几个经过实践验证的方法，你可以根据自己的编辑器模板类型来选择：

方法一：直接调用Grid的closeCell()方法（最常用） #

Kendo Grid本身提供了closeCell()方法，可以直接关闭当前处于编辑状态的单元格。核心思路是在你的编辑器模板选项上绑定点击事件，触发时获取Grid实例并调用该方法。

具体步骤： #

1. 在编辑器模板中，给需要触发关闭的选项添加点击事件绑定——可以给按钮或选项元素加onclick属性，也能用jQuery绑定事件。
2. 在点击事件处理函数中，获取当前的Kendo Grid实例。
3. 调用Grid的closeCell()方法，它会自动关闭当前正在编辑的单元格。

代码示例： #

编辑器模板（比如用<script>定义的模板）

<script id="customEditorTemplate" type="text/x-kendo-template">
  <div class="editor-options">
    <span class="option-item" onclick="closeCurrentEditor()">选择并关闭</span>
    <!-- 其他编辑器内容 -->
  </div>
</script>

JavaScript处理函数

function closeCurrentEditor() {
  // 获取Grid实例，这里假设Grid的id是"grid"
  const grid = $("#grid").data("kendoGrid");
  // 关闭当前编辑的单元格
  grid.closeCell();
}

方法二：结合Grid的edit事件记录编辑单元格（更灵活） #

如果你的编辑器模板比较复杂，或者需要在关闭前做一些额外逻辑（比如保存数据、验证），可以先在Grid的edit事件中记录当前编辑的单元格元素，之后在点击事件中针对该单元格调用closeCell()。

代码示例： #

let currentEditingCell = null;

$("#grid").kendoGrid({
  // 其他Grid配置
  edit: function(e) {
    // 记录当前编辑的单元格容器
    currentEditingCell = e.container;
  },
  // 其他配置项
});

// 编辑器模板中的点击事件处理
function closeCurrentEditor() {
  const grid = $("#grid").data("kendoGrid");
  if (currentEditingCell) {
    // 针对特定单元格关闭编辑器
    grid.closeCell(currentEditingCell);
    // 重置记录
    currentEditingCell = null;
  }
}

方法三：针对自定义下拉类编辑器的特殊处理 #

如果你的编辑器是Kendo DropDownList或类似的组件，也可以在组件的select事件中触发关闭单元格：

// 在编辑器模板中初始化DropDownList时绑定select事件
$("#dropdown").kendoDropDownList({
  // 下拉框配置
  select: function(e) {
    const grid = $("#grid").data("kendoGrid");
    grid.closeCell();
  }
});

注意事项： #

• 确保Grid实例获取正确：如果Grid是动态生成的，最好通过当前元素的上下文查找（比如$(this).closest(".k-grid").data("kendoGrid")），避免依赖固定id。
• 如果需要在关闭前保存数据，可以先调用grid.saveCell()再关闭，或者在closeCell()前完成数据同步。

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