如何在Kendo的command命令按钮点击事件中传递当前行ID参数

报错的核心原因是Kendo Grid command列的行内onclick事件直接使用#:Id#语法时，容易因为模板上下文解析、引号转义问题导致变量未定义，推荐用以下三种方式解决，优先选择第三种官方原生方案：

方案1：修正行内onclick的模板写法 #

如果要继续使用行内绑定的方式，需要明确指定上下文为data，同时根据ID的类型处理引号：

• 若ID为数值类型：

{ 
  name: "edit", 
  template: "<a class=\"k-icon k-i-edit\" onclick=\"onButtonClick(#= data.Id #)\" title=\"Update\"></a>" 
}

• 若ID为字符串类型，需要额外加引号包裹：

{ 
  name: "edit", 
  template: "<a class=\"k-icon k-i-edit\" onclick=\"onButtonClick('#= data.Id #')\" title=\"Update\"></a>" 
}

方案2：使用data属性+事件委托（可避免模板转义问题） #

不需要在行内写事件绑定，把ID存在按钮的自定义data属性中，通过事件委托获取参数：

1. 调整command模板，添加自定义类和data属性：

{ 
  name: "edit", 
  template: "<a class=\"k-icon k-i-edit custom-edit-btn\" data-id=\"#= data.Id #\" title=\"Update\"></a>" 
}

2. 绑定点击事件，注意要绑定在Grid容器本身，适配动态渲染的行：

// 替换#grid为你实际的Grid容器ID
$("#grid").on("click", ".custom-edit-btn", function() {
  const rowId = $(this).data("id");
  onButtonClick(rowId);
});

方案3：使用Kendo Command原生click回调（最稳妥的官方方案） #

Kendo Grid的command配置本身支持click属性，直接在回调中获取当前行数据，完全不需要处理模板参数拼接：

command: [
  { 
    name: "edit", 
    template: "<a class=\"k-icon k-i-edit\" title=\"Update\"></a>",
    click: function(e) {
      e.preventDefault(); // 阻止命令默认行为
      // 获取当前点击行的完整数据项
      const dataItem = this.dataItem($(e.currentTarget).closest("tr"));
      // 传递ID调用自定义函数
      onButtonClick(dataItem.Id);
    }
  },
  // 剩余delete命令保持原有配置即可
  { name: "delete", template: "<span class=\"k-icon k-i-delete\" title=\"Delete\"></span>", visible: function (data) { return data.Count == "0" } }
],
title: "Action"

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