Telerik RadGrid group header alignment (with static grid headers)? - asp.net

Question

The group headers in my RadGrid align properly when I don't use static headers, but when I do, they get out of alignment. Can't seem to find anything that fixes this. Relevant code, unimportant details omitted:
<telerik:RadGrid runat="server" ID="RadGrid1" GridLines="None" AllowSorting="True" AutoGenerateColumns="False" AllowMultiRowSelection="True" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView DataKeyNames="PageID">
<GroupHeaderTemplate>
<asp:CheckBox runat="server" ID="cbGroupHeader"/>
<asp:Label runat="server" ID="lblGroupHeader" Text='<%# (((GridGroupHeaderItem)Container).AggregatesValues["Group"]) %>'/>
</GroupHeaderTemplate>
<Columns>
<telerik:GridClientSelectColumn HeaderStyle-Width="2.5%"/>
<telerik:GridBoundColumn DataField="PageName" HeaderText="Page Name" UniqueName="PageName"/>
<telerik:GridBoundColumn DataField="PageID" Display="False" ReadOnly="True" UniqueName="PageID"
...
</Columns>
<GroupByExpressions>
<telerik:GridGroupByExpression>
<GroupByFields>
<telerik:GridGroupByField FieldName="Order"/>
</GroupByFields>
<SelectFields>
<telerik:GridGroupByField FieldName="Group"/>
</SelectFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="True" AllowColumnsReorder="True" ReorderColumnsOnClient="False">
<Selecting AllowRowSelect="True"/>
<Resizing AllowColumnResize="True" ResizeGridOnColumnResize="False" ClipCellContentOnResize="True" EnableRealTimeResize="True" AllowResizeToFit="True"/>
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True"/>
</ClientSettings>
</telerik:radGrid>
Pictures (imgur):
UseStaticHeaders="False"
UseStaticHeaders="True"

Answer 1

I just ran into a similar issue.
The site I'm working has has radGrids, which are re-sized when the browser window is re-sized. The radGrid header looked normal when the browser window size was small, but became misaligned as the browser size increased.
I have UseStaticHeaders set to "true" and TableLayout set to "fixed". I'm also using specific Header Widths instead of percentages.
When re-sizing radGrids, its best to leave off the width of one column. I noticed this wasn't the case on the grid I was working on. When I removed one column's width, the headers immediately aligned correctly.
I'm not sure if this solution will work for you, but it worked for me.
UPDATE
Here's the markup for one of the grid's I've been working on:
<telerik:RadGrid ID="grdItems" runat="server" OnNeedDataSource="grdItems_NeedDataSource" AutoGenerateColumns="False" Width="100%" Height="100%"
GridLines="None" EnableOutsideScripts="True" PagerStyle-AlwaysVisible="true" PagerStyle-Mode="NextPrevAndNumeric" AllowPaging="true" PageSize="250"
AllowSorting="true" OnItemCreated="grdItems_ItemCreated" OnItemCommand="grdItems_ItemCommand" OnPreRender="grdItems_PreRender" TabIndex="17"
OnItemDataBound="grdItems_ItemDataBound" >
<ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" ColumnsReorderMethod="reorder">
<Selecting AllowRowSelect="False" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<Resizing AllowColumnResize="True" ClipCellContentOnResize="true" EnableRealTimeResize="true" ResizeGridOnColumnResize="true" />
</ClientSettings>
<MasterTableView CommandItemDisplay="Top" ClientDataKeyNames="ei_pk" DataKeyNames="ei_pk,ei_eco_fk" AllowAutomaticInserts="True" GridLines="None" TableLayout="fixed" HeaderStyle-Wrap="false" ItemStyle-Wrap="false">
<CommandItemTemplate>
<asp:Image ID="AddItem" runat="server" ImageUrl="~/RadControls/Grid/Skins/Office2007/AddRecord.gif" AlternateText="Add Item" /><asp:Label ID="lblAddItem" runat="server" Text="Add Item" />
</CommandItemTemplate>
<Columns>
<telerik:GridTemplateColumn UniqueName="Edit" Visible="False" Resizable="false" Reorderable="false">
<ItemTemplate>
<asp:HyperLink ID="EditLink" runat="server" Text="Edit" ImageUrl="../RadControls/Grid/Skins/Office2007/Edit.gif" />
</ItemTemplate>
<HeaderStyle Width="20" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridButtonColumn Resizable="false" Reorderable="false" ConfirmText="Are you sure you want to delete this item?" UniqueName="Delete" CommandName="Delete" Visible="False" ButtonType="ImageButton" ImageUrl="../RadControls/Grid/Skins/Office2007/Delete.gif">
<HeaderStyle Width="20"/>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridButtonColumn>
<telerik:GridBoundColumn HeaderText="Trade" DataField="ftr_description" UniqueName="ftr_description" />
<telerik:GridBoundColumn HeaderText="Cost Type" DataField="combined_itemType" UniqueName="combined_itemType" />
<telerik:GridBoundColumn HeaderText="Est. Type" DataField="etp_code" UniqueName="etp_code" />
<telerik:GridBoundColumn HeaderText="Item Code" DataField="combined_code" UniqueName="combined_code" />
<telerik:GridBoundColumn HeaderText="Quantity" DataField="ei_quantity" UniqueName="ei_quantity">
<HeaderStyle Width="50" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Unit Cost" DataField="ei_unitCostworking" UniqueName="ei_unitCostworking" >
<HeaderStyle Width="75" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Total Cost" DataField="ei_extendedCostWorking" UniqueName="ei_extendedCostWorking" DataFormatString="{0:#0.00}">
<HeaderStyle Width="80" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Budget" DataField="ei_budgetworking" UniqueName="ei_budgetworking">
<HeaderStyle Width="80" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridHyperLinkColumn HeaderText="Change Order" DataTextField="eco_number" UniqueName="eco_number" DataNavigateUrlFields="eco_number" SortExpression="eco_number">
<HeaderStyle Width="104" />
</telerik:GridHyperLinkColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>