如何访问 kendo ui 网格列命令模板中的数据行？

Question

我想访问 kendo ui 网格列命令模板中的数据行，但没有找到解决此请求的解决方案。

<script>
$("#grid").kendoGrid({
    columns : [{
            field : "firstname",
            title : "First Name"
        }, {
            field : "lastname",
            title : "Last Name"
        }, {
            field : "cellphone",
            title : "Cell Phone"
        }, {
            field : "deskphone",
            title : "Desk Phone"
        }, {
            field : "emailaddress",
            title : "Email Address"
        },
        {
            command : [
            {
                name: "note",
                text: "note",
                template:"<a class='tds-grid-button k-button k-grid-#: name #' title='#: text #'> #: rowData.ID #    <i class='fa fa-comment-o'></i></a>",
                imageClass: "fa fa-comment-o",
                click: note_Clicked
            }
]
});
</script>

我想从列命令模板中的行数据中访问ID 值：#: rowData.ID #

template:"<a class='tds-grid-button k-button k-grid-#: name #' title='#: text #'> #: rowData.ID #    <i class='fa fa-comment-o'></i></a>"

如何解决这个问题？

Answer 1

我认为你不能按照你现在的方式去做。我认为您无法以这种方式访问​​行数据。 如果您将 rowData.ID 替换为函数调用，则该函数只执行两次，不是每渲染一行一次，这意味着模板仅在网格初始化期间“执行”。

我发现这个 Telerik 论坛帖子讨论了这个问题：http://www.telerik.com/forums/accessing-row-data-in-a-command 建议您使用 Grid 的 dataBound 事件来更改按钮上的文本，并且他们提供了一个演示 Dojo 的链接。

这是一个演示链接，我从论坛帖子中获取了 dojo，并稍微修改了 dataBound 处理程序以使用 dataItem 中的 Id 来动态更改按钮上的文本。 http://dojo.telerik.com/@Stephen/oVuCo

我不知道该怎么做。

Answer 2

我遇到了同样的问题。我得到的解决方案如下。

您可以使用可访问数据的简单列模板代替列命令。像这样：

                {
                    title: "Status", width: "140px",
                    template: (item) => {
                        if (item.Status == 'Outstanding') {
                            return "<a class='ignore-outstanding' >Outstanding</a>";
                        } else
                            return item.Status;                            
                    }                        
                },

然后像这样在 dataBound 处理程序中添加您的点击处理程序：

            dataBound: () => {                    
                var grid = $(gridSelector).data("kendoGrid");
                $(gridSelector + cellSelector).click((e) => {
                    e.preventDefault();
                    var dataItem = grid.dataItem($(e.currentTarget).closest("tr"));
                    alert(dataItem.YourField);
                });
            },

Answer 3

试试这个

$("#grid").kendoGrid({
dataSource: {
   data: data,
   schema: {
     model: {
       id: "Id",
       fields:{
          Id: {type: "number"},
          firstname: { type: "string"},
          lastname: { type: "string"},
          cellphone: { type: "string"},
          deskphone: { type: "string"},
          emailaddress: { type: "string"}
          }
        }
     }
},
        columns : [{
                field : "firstname",
                title : "First Name"
            }, {
                field : "lastname",
                title : "Last Name"
            }, {
                field : "cellphone",
                title : "Cell Phone"
            }, {
                field : "deskphone",
                title : "Desk Phone"
            }, {
                field : "emailaddress",
                title : "Email Address"
            },
            {
                command : [
                {
                    name: "note",
                    text: "note",
                    template: "<a class='tds-grid-button k-button k-grid-#=name#' title='#=name#'> 
    #=Id# <i class='fa fa-comment-o'></i></a>"
                }
    ]
    });
    </script>

注意- 代替 #=Id# 将要设置的主要字段放在剑道网格中。 我认为您在剑道网格数据源中有模型。

Answer 4

坦克， 我找到我的解决方案来解决它。

您可以使用 kendo ui 网格的 dataBound 事件，如下所示：

$("#grid").kendoGrid({
    columns : [{
            field : "firstname",
            title : "First Name"
        }, {
            field : "lastname",
            title : "Last Name"
        }, {
            field : "cellphone",
            title : "Cell Phone"
        }, {
            field : "deskphone",
            title : "Desk Phone"
        }, {
            field : "emailaddress",
            title : "Email Address"
        },
        {
            command : [
            {
                name: "note",
                text: "note",
                template:"<a class='tds-grid-button k-button k-grid-#: name #' title='#: text #'> #: rowData.ID #    <i class='fa fa-comment-o'></i></a>",
                imageClass: "fa fa-comment-o",
                click: note_Clicked
            }
],
dataBound: function () {
                        var grid = this;
                        var model;

                        grid.tbody.find("tr[role='row']").each(function () {
                            rowData = grid.dataItem(this);
                            rowData.ID
                            rowData.Name
                            //and more and more
             }
}
});