Kendo UI Grid排序异常：MVVM模式下视图模式触发编辑列误显

这问题我之前也碰到过！大概率是排序操作触发了Grid的重渲染，但视图模式下没有严格控制最后一列模板的显示逻辑——Kendo Grid排序后会重新绑定数据、渲染行，要是模板里没区分好视图/编辑模式，就会出现按钮“漏出来”的情况。下面给你具体的排查和解决方法：

1. 把列模板的条件判断做扎实 #

核心就是让最后一列的按钮只在编辑模式下渲染，视图模式下返回空内容。如果是用JS配置Grid，直接在列的template里加模式判断：

columns: [
  // 前4列的排序配置省略
  {
    field: "actions",
    sortable: false, // 记得保持最后一列不可排序
    template: function(dataItem) {
      // 这里用你MVVM中记录当前模式的变量，比如viewModel.isViewMode()
      if (viewModel.isViewMode()) {
        return ""; // 视图模式下留空
      } else {
        return '<button class="remove-btn">移除</button><button class="add-btn">添加</button>';
      }
    }
  }
]

要是用Knockout这类MVVM框架的绑定语法，直接在模板里用条件绑定更直观：

<script type="text/x-kendo-template" id="actionColTemplate">
  <!-- ko if: !$root.isEditing() -->
  <span></span> <!-- 视图模式下空内容 -->
  <!-- /ko -->
  <!-- ko if: $root.isEditing() -->
  <button data-bind="click: $root.handleRemove">移除</button>
  <button data-bind="click: $root.handleAdd">添加</button>
  <!-- /ko -->
</script>

2. 检查排序触发的事件有没有乱改模式状态 #

有时候排序会触发dataBound或者sort事件，要是你的代码在这些事件里不小心把编辑模式的开关打开了，那按钮肯定会显示出来。赶紧查一下这些事件的处理函数：

$("#yourGrid").kendoGrid({
  // 其他配置...
  sort: function(e) {
    // 打个日志确认当前模式是否正确
    console.log("排序触发，当前是否为编辑模式：", viewModel.isEditing());
    // 确保这里没有误将isEditing设为true的代码
  },
  dataBound: function(e) {
    // 同样检查这里的逻辑，别误改了模式状态
  }
});

3. 试试用Kendo内置的编辑模板（更省心） #

要是你没手动维护编辑模式，其实可以直接用Kendo Grid的editTemplate特性——Grid会自动在编辑模式使用这个模板，视图模式用普通的template，排序重渲染时也会严格遵循这个规则：

columns: [
  // 前4列配置省略
  {
    field: "actions",
    sortable: false,
    template: "", // 视图模式下空内容
    editTemplate: '<button class="remove-btn">移除</button><button class="add-btn">添加</button>'
  }
]

4. 极端情况：手动强制重渲染列模板 #

要是上面的方法都没搞定，那就来个“硬办法”——在排序后手动重新渲染最后一列的模板，确保模式判断生效：

sort: function(e) {
  const grid = this;
  // 用setTimeout等Grid渲染完成后再操作
  setTimeout(() => {
    grid.tbody.find("tr").each(function() {
      const dataItem = grid.dataItem(this);
      const actionCell = $(this).find("td:last");
      // 重新套用模板内容
      actionCell.html(grid.columns[4].template(dataItem)); // 最后一列索引为4（从0开始计数）
    });
  }, 0);
}

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