自定义kendo网格中的每个按钮

Question

我有一个带有自定义按钮的kendo网格。这是通过以下方式完成的：

<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();

我遇到的问题是，它只是更改网格中的第一个按钮。所以，如果我有3行，只有第一个按钮正在改变。当我创建不同的ID并将它们实现为kendo按钮时，它可以工作。如何动态为<button id="textButton"分配ID以创建单个按钮（$("#textButton").kendoButton();）

Answer 1

使用类而不是id

let myObject  = { orange: "10.5", banana:"20.5", apple: "5.1", pineapple: "5.1", cherry: "5.1" }
let FruitsRed = ["apple", "cherry",]
Object.keys(myObject).forEach((k)=> FruitsRed.indexOf(k)===-1 && delete myObject[k])

并改为执行此操作

 { template: '<button class="textButton" style="margin: 5px;">Open WFR</button>', title: 'View Event'}

我建议您使用网格的dataBound事件将它们转换为按钮

$(".textButton").kendoButton();

我确实建议使用这种方法来减少对整个DOM的影响。

这里是道场和代码https://dojo.telerik.com/EhUNUwOr

$(..).kendoGrid({
   dataBound: function(e) {
       $('.textButton').kendoButton();
   }
});