在 Kendo UI Grid 中使用 column.values 和行模板

【问题标题】：Use column.values together with row template in Kendo UI Grid在 Kendo UI Grid 中使用 column.values 和行模板
【发布时间】：2026-02-02 01:05:01
【问题描述】：

我正在使用带有自定义行模板的 Kendo 网格，并为一列定义了值。弹出编辑器正确显示下拉列表，但网格仍显示 id 字段。代码：

<script id="usersTableRowTemplate" type="text/x-kendo-tmpl">
    <tr data-uid="#= uid #">
        <td>#: Name #</td>
        <td>#: GroupId #</td>
    </tr>
</script>
<script>
    $("#usersTable").kendoGrid({
        "rowTemplate": kendo.template($("#usersTableRowTemplate").html()),
        "editable": "popup",
        "columns": [
            {
                "field": "Name",
                "title": "Name"
            },
            {
                "field": "GroupId",
                "title": "Group",
                "values": [{"value": 1,"text": "A"}, {"value": 2,"text": "B"}]
            }
        ]
    });
</script>

请问在模板中 GroupId 的正确表达是什么？

【问题讨论】：

标签： kendo-ui kendo-grid

【解决方案1】：

我终于就这个问题联系了 Kendo 支持团队。解决方案是获取对列的引用，遍历值并显示具有value == GroupId 的项目中的文本。

<script id="usersTableRowTemplate" type="text/x-kendo-tmpl">  
<tr data-uid="#= uid #">
    <td>#: Name #</td>
    <td>#: textForGroup(GroupId) #</td>
</tr>
</script>

<script>
function textForGroup(id) {      
    var values = $("#usersTable").data("kendoGrid").columns[1].values;

    var item = $.grep(values, function(item, _) {               
        return item.value === id;
    })[0];

    return item ? item.text : "";
}
</script>

【讨论】：