1

我想访问 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>"

如何解决此解决方案？

4

4 回答 4

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

我不知道该怎么做。

于 2016-09-26T14:40:39.673 回答
1

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

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

                {
                    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);
                });
            },
于 2018-11-08T15:22:01.147 回答
0

试试这个

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

于 2016-09-28T06:54:42.780 回答
0

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

您可以使用 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
             }
}
});

于 2016-10-31T06:08:04.760 回答