Question

我想访问kendo ui grid column命令模板中的数据行，但找不到解决此请求的解决方案。

＆＃13;

<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>

＆＃13;

我想从列命令模板中的行数据中访问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，则该函数仅对每个渲染行执行两次 not ，这意味着模板仅执行＆＃34;执行＆＃34;在网格初始化期间。

我发现这篇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

尝试这个

$("#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＃将要设置的主要字段放在kendo网格中。我认为你在kendo网格数据源中有模型。

Answer 3

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

你可以使用kendo ui grid的dataBound事件，如下所示：

＆＃13;

$("#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
             }
}
});

＆＃13;

Answer 4

我有同样的问题。我来到的解决方案如下。

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

                {
                    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);
                });
            },

如何访问kendo ui grid column命令模板中的数据行？

4 个答案: