自定义剑道网格中的每个按钮答案

【问题标题】：customizing each button in kendo grid自定义剑道网格中的每个按钮
【发布时间】：2018-03-08 07:25:14
【问题描述】：

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

<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 并将它们实现为剑道按钮时，它就可以工作了。如何为<button id="textButton" 动态分配 id 以创建单个按钮 ($("#textButton").kendoButton();)

【问题讨论】：

如果我的回答解决了您的问题，您能告诉我吗？

标签： button model-view-controller kendo-ui kendo-grid

【解决方案1】：

使用类而不是 id

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

改为这样做

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

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

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

我确实建议使用这种方法，而不是更清洁地减少对整个 DOM 的影响。

这里是道场和代码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>

【讨论】：