Kendo Grid编辑/新增行时如何保留列内按钮？

这个问题我之前也碰到过，Kendo Grid在inline编辑模式下，会给未指定自定义编辑器的列默认渲染文本框，所以要让按钮在新增/编辑行时依然显示，只要给按钮列配置对应的编辑模板或者自定义编辑器就可以了，下面是两种实用的解决方法：

方法一：使用editTemplate配置编辑模式模板 #

直接给按钮列同时设置template（查看状态的渲染模板）和editTemplate（编辑/新增状态的渲染模板），这样两种状态下都会渲染按钮：

$("#grid").kendoGrid({
  dataSource: yourDataSource, // 替换成你的数据源实例
  editable: "inline",
  columns: [
    // 其他列配置...
    {
      field: "action", // 可以是数据源中的一个虚拟字段（比如默认空字符串），无需实际存储数据
      title: "操作",
      // 查看状态下的按钮模板
      template: '<button class="k-button k-primary" onclick="handleRowAction(#: id #)">执行操作</button>',
      // 编辑/新增状态下的按钮模板
      editTemplate: '<button class="k-button k-primary" onclick="handleRowAction(#: id # || 0)">执行操作</button>'
    }
  ]
});

// 按钮点击事件处理函数
function handleRowAction(rowId) {
  if (rowId === 0) {
    console.log("这是新增行，执行新增相关操作");
  } else {
    console.log(`处理ID为${rowId}的行操作`);
  }
}

说明： #

• editTemplate会在进入编辑或新增行时自动渲染，新增行时id字段可能未定义，所以用#: id # || 0做兼容处理；
• 按钮使用Kendo的k-button类，保持和Grid的UI风格统一；
• 如果按钮不需要绑定数据源字段，可以把field设为一个不存在的字段，只要数据源中没有冲突即可。

方法二：使用自定义editor函数 #

如果需要更灵活的控制（比如根据当前行数据动态调整按钮状态），可以给列配置自定义编辑器函数，手动渲染按钮：

$("#grid").kendoGrid({
  dataSource: yourDataSource,
  editable: "inline",
  columns: [
    // 其他列配置...
    {
      field: "action",
      title: "操作",
      template: '<button class="k-button" onclick="handleRowAction(#: id #)">执行操作</button>',
      // 自定义编辑器函数
      editor: function(container, options) {
        // 创建按钮元素
        const actionBtn = $('<button class="k-button">执行操作</button>');
        
        // 绑定点击事件，通过options.model访问当前行的ViewModel
        actionBtn.click(function() {
          const currentRow = options.model;
          if (currentRow.isNew()) {
            console.log("处理新增行的操作", currentRow);
          } else {
            console.log(`处理ID为${currentRow.id}的行操作`, currentRow);
          }
        });
        
        // 将按钮添加到编辑容器中
        actionBtn.appendTo(container);
      }
    }
  ]
});

说明： #

• editor函数的options.model参数就是当前行的ViewModel，新增行时可以通过isNew()方法判断；
• 这种方式适合需要根据行数据动态修改按钮文本、禁用状态等场景；
• 不需要担心编辑器会提交按钮的值到数据源，因为action字段如果是虚拟字段，提交时会被忽略（或者你可以在数据源的schema中排除这个字段）。

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