Customizing GroupHeaderTemplate to line up totals with grid columns

[Dave]

I have a RadGrid instance that has grouping enabled and contains several numeric columns. I would like to display totals for the numeric columns but would prefer to show the totals in the header of the groups as opposed to the footer. I think it's more intuitive and easier to read if the totals were displayed in the group headers. I know I can customize the look and feel of the group headers by using the GroupHeaderTemplate. The issue I am having now is that I don't know how to line up each total in my GroupHeaderTemplate with the corresponding column in the grid itself. Is this possible? I know there's a way to do this with the GroupFooterTemplate (i.e. adding TD elements to the GroupFooterTemplate and then adding code to the pre_render event to set the ColumnSpan of each template cell to 1), but I'm not sure how to accomplish the same thing in the group header. Thanks in advance for your assistance with this matter.

[Radoslav]

Hi Dave,

Unfortunately the RadGrid does not support the desired functionality. The GroupHeaderTemplate is rendered into a single cell, so it could not be aligned with grid columns. However you could try using a custom approach. For example:
Set the HeaderStyle.Width of each RadGrid column:

<Columns>
                <telerik:GridBoundColumn Aggregate="Count" DataField="ProductName" HeaderText="Product name"
                    SortExpression="ProductName" UniqueName="ProductName">
                    <HeaderStyle Width="200px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn Aggregate="Sum" DataField="UnitsInStock" HeaderText="Units In Stock"
                    SortExpression="UnitsInStock" UniqueName="UnitsInStock">
                    <HeaderStyle Width="200px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn Aggregate="Sum" DataField="UnitPrice" HeaderText="Unit price"
                    FooterText="Total price: ">
                    <HeaderStyle Width="200px" />
                </telerik:GridBoundColumn>
                <telerik:GridCalculatedColumn HeaderText="Total Price" UniqueName="TotalPrice" DataType="System.Double"
                    DataFields="UnitPrice, UnitsInStock" Expression="{0}*{1}" FooterText="Total : "
                    Aggregate="Sum">
                    <HeaderStyle Width="200px" />
                </telerik:GridCalculatedColumn>
            </Columns>

Set the Width of the RadGrid :

<telerik:RadGrid ID="RadGrid1" Width="823px"

Set the Width of each control into the GroupHeaderTemplate to match the Width of each column:

<GroupHeaderTemplate>
                <asp:Label runat="server" ID="Label1" Width="200px" Text='<%# "Number of units: "+ (((GridGroupHeaderItem)Container).AggregatesValues["UnitsInStock"]) %>'
                    Visible='<%# ((((GridGroupHeaderItem)Container).AggregatesValues["UnitsInStock"]) != null)%>'>
                </asp:Label>
                <asp:Label runat="server" ID="Label2"  Width="200px" Text='<%# "Number of items in group: "+ (((GridGroupHeaderItem)Container).AggregatesValues["AvailableUnits"]) %>'
                    Visible='<%# ((((GridGroupHeaderItem)Container).AggregatesValues["AvailableUnits"]) != null)%>'>
                </asp:Label>

…

Additionally I am sending you a simple example which demonstrates the described approach. Please check it out and let me know if it helps you.

Regards,
Radoslav
the Telerik team