Kendo Grid create a icon button on each rows

user_11393883 0
Viewed 1093

In kendo grid, I want to create button in field column. And I came out with this example. But currently it only display for the first row (Any idea how to solve this?).

p/s : I know another option is to use command but I already used that for edit and delete button and I wanted to make separate column for Remark field.

<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>
kendo-grid kendo-ui jquery javascript
1 Answers

Your problem is that you're using the # selector, which symbolizes the id, and ids must be unique.

To match all the buttons, use the class selector:

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

To get unique ids, use the item's uid (or kendo.guid()):

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

Demo: https://dojo.telerik.com/@GaloisGirl/oZOYOtez

user_7359640
Related