Use column.values together with row template in Kendo UI Grid

Question

I am using Kendo grid with custom row template and have defined values for one column. The popup editor is showing dropdown correctly, but grid is still showing id field. Code:

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

Please what is the correct expression in template for GroupId?

segy segy · Accepted Answer · 2014-07-03T14:25:40

I finally contacted Kendo support team with this issue. Solution is to get reference to the column, iterate over the values and show the text from the item which has 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>

Use column.values together with row template in Kendo UI Grid

1 Answers