Telerik RadGrid group header alignment (with static grid headers)?

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"

ks78 · Answer 1 · 2012-12-07T16:04:00.620

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>
                <a href="#" onclick="return ShowAddForm();"><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" /></a>
            </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>

My table layout is set to the default, which I assume is auto. I had HeaderStyle-Width set as percentages, but I tried leaving one off and it still didn't fix it :( — garuda one, Dec 06 '12 at 16:44
@justaguy Unless you have a reason for leaving the TableLayout as the default, you might try setting it to "fixed". — ks78, Dec 06 '12 at 17:40
Changed to fixed with specific widths, then with one left off, still no go. — garuda one, Dec 07 '12 at 15:12
@justaguy I updated my answer with the markup from one of my grids. — ks78, Dec 07 '12 at 16:04
Tried moving the HeaderStyle out of the inline version (HeaderStyle-Width), because that was pretty much the only difference, but that still didn't work. HorizontalAlign no go either. I suspect it's something in the CSS somewhere. Maybe something in the skin we're using. — garuda one, Dec 14 '12 at 14:59

Telerik RadGrid group header alignment (with static grid headers)?

1 Answers1