[Solved] Is it possible to add a group header to columns?

[Wai Kei]

Hi Telerik,

    For my project there is a requirement to group the columns into different categories. Currently I have a Telerik grid which displays about 15 columns of information. The customer wants to group the first 3 columns under a header (e.g. called Group1), the next 6 columns under a header (e.g. called Group2), and rest under another header (e.g. called Group3). So on the screen it will look like:


[    Group1        ][                   Group2                    ][                        Group3                        ]
[col1][col2][col3][col4][col5][co63][col7][col8][col9][col10][col11][col12][col13][col14][col15]
[                                                         row1                                                                        ]
[                                                         row2                                                                        ]
[                                                         row3                                                                        ]
[                                                         row4                                                                        ]
.....
..
.

   Is it even possible to do in the current implementation of the Telerik Grid? to be able to add such a grouping on top of the columns? If not, what do you suggest to do?

Thanks,

Wai Kei

[Atanas Korchev]

Hi Wai Kei,

 You can check the header template example which you can use in your case. There is a known limitation though the grouped columns are no longer sortable. 
 If you sorting is mandatory for you I can suggest a different implementation - to add a <table> before the grid styled with the grid styles so it looks as if it is part of the grid. Here is a sample implementation:

<table class="t-widget t-grid-header" style="width:100%; border-collapse:collapse;">
    <colgroup>
        <col />
        <col style="width:138px"/>
    </colgroup>
    <tr>
        <th class="t-header" style="border-bottom:none">First Group</th>
        <th class="t-header" style="border-bottom:none">Second Group</th>
    </tr>
</table>
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Width(100);
            columns.Bound(o => o.ContactName).Width(200);
            columns.Bound(o => o.ShipAddress);
            columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
        })
        .Scrollable()
        .Sortable()
        .Pageable()
%>

You need to set the width of each group column via the col tag.

Regards,
Atanas Korchev
the Telerik team

[Wai Kei]

Thanks Telerik.

This solution fits what we need to do. And we can set it up like the way we wanted. There are two issues that I have found so far. First, the alignment will be slightly off in IE7 since the grid would render a bit differently in IE7. The group header row and the grid header will not be perfectly aligned due to the different renderings between IE7 and IE8. It looks fine in FF and Chrome. Also, the grid that I have is a sortable grid. When you sort the column, the The showing/hiding of the arrow would widen or shorten the width of the column, hence, the alignment of the group header will be off too. This issue can be fixed by setting a fixed column width to each column and make it a bit wider than it should be to accommodate the potential arrow icon appearance. However, this would waste a lot of horizontal space.

But without a real built-in solution. This approach does what we want to do save some minor issues. I really appreciate it.

Wai Kei