Grouping On Foreign Key But Wanting To Display Client Template

[David]

I'm having the same issue as described in this forum post.  I have a foreign key column in my grid.  In the ClientTemplate() for this column, I'm showing a different property of the ViewModel.  That works as expected.  When I drag the column into the groupables area, it works correctly, however it shows the foriegn key property being grouped on, not the property I'm showing in the ClientTemplate() for the column.

I've messed around with the ClientGroupHeaderTemplate(), but the property from my ViewModel is unavailable and will throw a javascript reference error if I try to use it.  It appears that the only object available to the ClientGroupHeaderTemplate() is the group json object returned from the server.

I have attached a redacted picture of a grid currently in use that demonstrates this.  I'm sure I'm missing something obvious, but can someone point me in the right direction?

[Daniel]

Hello David,

Indeed, the property that is shown as text in the column is not available in the group data and it might not be part of the Grid model at all. We have enhanced the behavior to automatically match the value to the appropriate text when using foreign key column in the service pack. However, if you are not using foreign key column or you are using a ClientGroupHeaderTemplate then the text should be mapped to the value with custom code.

Regards,
Daniel
the Telerik team

[David]

Using the foreign key column fixed the problem completely, and actually works a bit more smoothly than the custom editor I was rolling on my own.

[Mohit]

Daniel or David, can either of you post sample code to illustrate this? That would really help me out. I'm facing the same problem I think but I don't understand the exact solution. I've used a similar approach for my grid where I want to group by Role. The group header should show the "RoleName" property but I need to access the "RoleId" property as well within that context to invoke my javascript function.

@(Html.Kendo().Grid<PersonViewModel>()
            .Name("mygrid")
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Columns(columns =>
            {
                columns.Bound(e => e.PersonId);
                columns.ForeignKey(p => p.RoleId,Model.Roles,"RoleId","RoleName")
                     .ClientGroupHeaderTemplate("#:value# <button id='add' onClick='javascript:addPersonToThisRole(#:value#)'>Add Person</button>");

With the above configuration, my group header shows the role id and not the role name. Can you help me figure this out? I have Kendo version 2013.1.319.340.

Much appreciated!

[Daniel]

Hello Mohit,

If you are using custom group header template then the values should be mapped with custom code. You could use approach similar to the one in the snippet below in order to achieve this:

columns.ForeignKey(p => p.RoleId,Model.Roles,"RoleId","RoleName")
                     .ClientGroupHeaderTemplate("#:foreignValues[value]# <button id='add' onClick='javascript:addPersonToThisRole(#:value#)'>Add Person</button>");

...

<script type="text/javascript">
    var foreignValues = {};
    $(function () {
        var grid = $("#mygrid").data("kendoGrid"),
            values = grid.columns[1].values;
        for (var i = 0; i < values.length; i++) {
            foreignValues[values[i].value] = values[i].text;
        }
    });
</script>

Regards,
Daniel
Telerik

[Mohit]

Ah now I understand - that worked perfectly! Thanks Daniel!