Kendo 网格在每一行上创建一个图标按钮

Question

在 kendo 网格中，我想在字段列中创建按钮。我想出了这个 example。但目前它只显示第一行（知道如何解决这个问题吗？）。

p/s ：我知道另一种选择是使用 command 但我已经将其用于编辑和删除按钮，我想为 Remark 字段创建单独的列。

<script>
  $("#grid").kendoGrid({
    dataBound:function(e){

      var gridRows = this.tbody.find("tr");
      gridRows.each(function (e) {          
        $("#remarkButton").kendoButton({icon: "paste-plain-text" });
      });

    },
    columns: [ 
      { field: "remark", tite: 'Remark',
        template: "<a class='k-button' id='remarkButton' ></a>" },
      { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
    ],
    dataSource: [ { remark: "Jane Doe" }, { remark: "John Doe" } ]
  });
</script>

<div id="grid"></div>

Answer 1

你的问题是你使用的是#选择器，它代表了id，id必须是唯一的。

要匹配所有按钮，请使用 class 选择器：

$(".remarkButton").kendoButton({icon: "paste-plain-text" });

要获得唯一 ID，请使用项目的 uid（或 kendo.guid()）：

template: function(x) {
    return "<a class='k-button remarkButton' id='remarkButton_" + x.uid + "' ></span></a>"      
}

演示：https://dojo.telerik.com/@GaloisGirl/oZOYOtez

Kendo 网格在每一行上创建一个图标按钮

Kendo Grid create a icon button on each rows

javascript

jquery

kendo-ui

kendo-grid