customizing each button in kendo grid - button

Question

I have a kendo grid with custom buttons at the end of the row. This is done in the following way:
<div class="demo-section k-content" style="float: right">
<button id="textButton" style="margin: 5px;">Open WFR</button>
<button id="textButton_remind" style="margin-left: 5px;">Remind Me</button>
</div>
columns: [
{
field: "WFR", title: "WFR", filterable: {
cell: {
operator: "contains",
suggestionOperator: "contains"
}
}
},
{ field: "Activity", title: "Activity" },
{ field: "Date", title: "Date" },
{ field: "Group", title: "Group" },
{ field: "MoreInfo", title: "More Information", hidden: true },
{ field: "Read", title: "Read", hidden: true },
{ template: '<button id="textButton" style="margin: 5px;">Open WFR</button>', title: 'View Event'}
$("#textButton").kendoButton();
The problem I am having is that, it is only changing the first button in the grid. so if I have 3 rows, only the first button is changing. When I create different IDs and implement them as a kendo button then it works. How can I dynamically assign an id to the <button id="textButton" to create individual buttons ($("#textButton").kendoButton();)

Answer 1

use a class instead of id
{ template: '<button class="textButton" style="margin: 5px;">Open WFR</button>', title: 'View Event'}
and do this instead
$(".textButton").kendoButton();
I suggest you use the dataBound event of your grid to convert them to buttons
$(..).kendoGrid({
dataBound: function(e) {
$('.textButton').kendoButton();
}
});
I do suggest this approach instead cleaner less taking effect on the whole DOM.
here is the dojo and the code https://dojo.telerik.com/EhUNUwOr
<div id="my-grid"></div>
<script>
$('#my-grid').kendoGrid({
columns: [
{
field: 'firstName',
title: 'First Name'
},
{
template: '<button class="grid-text-button">A</button><button class="grid-text-button">B</button>',
title: 'Actions'
}
],
dataSource: [
{
id: 1,
firstName: 'David'
},
{
id: 2,
firstName: 'Chuck'
}
],
dataBound: function(e) {
var $rows = e.sender.items();
$rows.find('.grid-text-button').kendoButton();
}
});
</script>