Horizontal Scrolling with Static Headers and show columns

[Dan]

Hi,
We have a RadGrid that has some columns hidden at startup.  We have enabled "UseStaticHeaders", "EnableHeaderContextMenu" and "UseStaticHeaders".  The issue is that when the client checks a previously hidden column, the headers don't line up or horizontally scroll with the columns below.  I have found that this is true whether in view mode or edit mode and that switching modes(causing a postback) cleans up the behavior.  In fact, if I add a column then go into edit mode and cancel edit mode, the page scrolls fine.

Thanks for your help,
Dan Norton

The RadGrid definition is attached.

<telerik:RadGrid ID="UserGrid" runat="server"
                    CssClass="RadGrid"
                    GridLines="None"
                    AllowPaging="true"
                    AllowSorting="true"
                    AutoGenerateColumns="False"
                    EnableHeaderContextMenu="true"
                    ShowStatusBar="true"
                    HorizontalAlign="NotSet"
                    AllowMultiRowEdit="False"
                    OnNeedDataSource="UserGrid_NeedDataSource"
                    OnItemDataBound="UserGrid_ItemDataBound"
                    Width="870"
                    >
    <ClientSettings>
        <Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="true" />
    </ClientSettings>
    <ExportSettings HideStructureColumns="true"
                    OpenInNewWindow="true"
                    ExportOnlyData="true"
                    IgnorePaging="true"
                    FileName="Que_Centre_Users_Export" />
    <MasterTableView CommandItemDisplay="TopAndBottom"
                        DataKeyNames="Id"
                        TableLayout="Fixed"
                        EditMode="EditForms"
                        InsertItemPageIndexAction="ShowItemOnCurrentPage"
                        PageSize="25"
                        >
        <Columns>
            <telerik:GridTemplateColumn HeaderText="First Name"
                                        UniqueName="EditFirstName"
                                        DataField="FirstName"
                                        SortExpression="FirstName"
                                        HeaderStyle-Width="100px"
                                        ItemStyle-Width="100px">
                <ItemTemplate>
                    <asp:LinkButton runat="server" Text="Edit" CommandName="EditUser" Id="lbFirstName" CausesValidation="false" />
                    <asp:Label runat="server" ID="lblFirstName" Text="" Visible="false" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtFirstName" Width="120" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="Last Name"
                                        UniqueName="EditLastName"
                                        DataField="LastName"
                                        SortExpression="LastName"
                                        HeaderStyle-Width="100px"
                                        ItemStyle-Width="100px">
                <ItemTemplate >
                    <asp:LinkButton runat="server" Text="Edit" CommandName="EditUser" Id="lbLastName" CausesValidation="false" />
                    <asp:Label runat="server" ID="lblLastName" Text="" Visible="false" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtLastName" Width="100" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn
                    DataField="EmailAddress"
                    HeaderText="Email Address"
                    UniqueName="EmailAddress"
                    SortExpression="EmailAddress"
                    HeaderStyle-Width="150px"
                    ItemStyle-Width="150px">
                <ItemTemplate >
                    <asp:Label runat="server" ID="lblEmailAddress" Text="" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtEmailAddress" Width="175" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn
                    DataField="PhoneNumber"
                    HeaderText="Phone Number"
                    UniqueName="PhoneNumber"
                    SortExpression="PhoneNumber"
                    HeaderStyle-Width="125px"
                    ItemStyle-Width="125px">
                <ItemTemplate >
                    <asp:Label runat="server" ID="lblPhoneNumber" Text="" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtPhoneNumber" Width="100" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="User Group"
                                        UniqueName="UserGroupName"
                                        DataField="UserGroupName"
                                        SortExpression="UserGroupName"
                                        HeaderStyle-Width="150px"
                                        ItemStyle-Width="150px">
                <ItemTemplate>
                    <asp:Label runat="server" ID="lblUserGroupName" Text="" />
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox Runat="server" Id="radUserGroup"
                                            EmptyMessage="Select User Group"
                                            MarkFirstMatch="true"
                                            Width="150px"
                                            Height="150"
                                            DropDownWidth="200"
                                            EnableLoadOnDemand="false"
                                            AllowCustomText="false"
                                            AutoPostBack="false"
                                            Filter="Contains"
                                            />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn
                    DataField="Username"
                    HeaderText="Username"
                    UniqueName="Username"
                    SortExpression="Username"
                    Display="false"
                    HeaderStyle-Width="100px"
                    ItemStyle-Width="100px">
                <ItemTemplate >
                    <asp:Label runat="server" ID="lblUsername" Text="" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtUsername" Width="100" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn
                    DataField="HourlyRate"
                    HeaderText="Hourly Rate"
                    UniqueName="HourlyRate"
                    SortExpression="HourlyRate"
                    Display="false"
                    HeaderStyle-Width="75px"
                    ItemStyle-Width="75px">
                <ItemTemplate >
                    <asp:Label runat="server" ID="lblHourlyRate" Text="" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtHourlyRate" Width="50" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn
                    DataField="HourlyOvertimeRate"
                    HeaderText="Hourly Overtime Rate"
                    UniqueName="HourlyOvertimeRate"
                    SortExpression="HourlyOvertimeRate"
                    Display="false"
                    HeaderStyle-Width="75px"
                    ItemStyle-Width="75px">
                <ItemTemplate >
                    <asp:Label runat="server" ID="lblHourlyOvertimeRate" Text="" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtHourlyOvertimeRate" Width="50" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="Delete"
                                        UniqueName="DeleteUser"
                                        DataField="Deleted"
                                        Resizable="false"
                                        HeaderStyle-Width="50px"
                                        HeaderStyle-HorizontalAlign="Center"
                                        ItemStyle-Width="50px"
                                        ItemStyle-HorizontalAlign="Center">
                <ItemTemplate >
                    <asp:ImageButton runat="server" CommandName="DeleteUser" Id="DeleteUserIcon" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="Block"
                                        UniqueName="BlockUser"
                                        DataField="Blocked"
                                        Resizable="false"
                                        HeaderStyle-Width="50px"
                                        HeaderStyle-HorizontalAlign="Center"
                                        ItemStyle-Width="50px"
                                        ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:ImageButton runat="server" CommandName="BlockUser" Id="BlockUserIcon" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <NoRecordsTemplate>
            <div style="padding: 5px;">No users exist.</div>
        </NoRecordsTemplate>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <asp:Panel runat="server" ID="UserEditForm" />
            </FormTemplate>
        </EditFormSettings>
        <CommandItemTemplate>
            <telerik:RadToolBar ID="UserGrid_RadToolBar" runat="server"
                                AutoPostBack="true"
                                EnableRoundedCorners="true"
                                EnableShadows="true">
                <Items>

                    <telerik:RadToolBarButton Text="Create New User" Value="CreateNewUser" CommandName="InitInsert" PostBack="true" />

                    <telerik:RadToolBarButton IsSeparator="true" Value="Separator1" />

                    <telerik:RadToolBarButton Value="FiltersGroup">
                        <ItemTemplate>
                            <div style="padding: 4px; min-height: 8px; vertical-align: middle;">
                                <asp:label runat="server" id="lblFiltersGroup"
                                            Text="Filter List: " ForeColor="White"
                                            Font-Bold="true" />
                            </div>
                        </ItemTemplate>
                    </telerik:RadToolBarButton>

                    <telerik:RadToolBarButton Value="FilterByUserGroup" Group="Filters">
                        <ItemTemplate>
                            <div style="margin-right: 5px; display: block; padding: 3px; min-height: 8px; vertical-align: middle;">
                                <asp:label runat="server" id="lblFilterByUserGroup"
                                            AssociatedControlId="radFilterByUserGroup"
                                            Text="User Group: "
                                            ForeColor="White"
                                            style="padding-right: 5px;" />

                                <telerik:RadComboBox Runat="server" Id="radFilterByUserGroup"
                                                        EmptyMessage="Select User Group"
                                                        MarkFirstMatch="true"
                                                        Width="175px"
                                                        Height="150"
                                                        DropDownWidth="200"
                                                        EnableLoadOnDemand="false"
                                                        AllowCustomText="false"
                                                        AutoPostBack="true"
                                                        Filter="Contains"
                                                        OnSelectedIndexChanged="radFilterByUserGroup_SelectedIndexChanged"
                                                        />
                            </div>
                        </ItemTemplate>
                    </telerik:RadToolBarButton>

                    <telerik:RadToolBarButton IsSeparator="true" Value="Separator2" />

                    <telerik:RadToolBarButton Value="RecordsPerPage">
                        <ItemTemplate>
                            <div style="margin-right: 5px; display: block; padding: 3px; min-height: 8px; vertical-align: middle;">
                                <asp:label runat="server" id="lblRecordsPerPage"
                                            AssociatedControlId="radRecordsPerPage"
                                            Text="Page Size: "
                                            ForeColor="White"
                                            style="padding-right: 5px;" />

                                <telerik:RadComboBox Runat="server" Id="radRecordsPerPage"
                                                        EmptyMessage="Select Records per Page"
                                                        MarkFirstMatch="true"
                                                        Width="75px"
                                                        Height="100"
                                                        DropDownWidth="100"
                                                        EnableLoadOnDemand="false"
                                                        AllowCustomText="false"
                                                        AutoPostBack="true"
                                                        Filter="Contains"
                                                        OnSelectedIndexChanged="radRecordsPerPage_SelectedIndexChanged"
                                                        />
                            </div>
                        </ItemTemplate>
                    </telerik:RadToolBarButton>

                    <telerik:RadToolBarButton IsSeparator="true"  Value="Separator3" />

                    <telerik:RadToolBarButton Text="Bulk Update" Value="BulkUpdate" CommandName="BulkUpdate" PostBack="true" />

                    <telerik:RadToolBarButton IsSeparator="true" Value="Separator4" />

                    <telerik:RadToolBarDropDown Text="Export Users">
                        <Buttons>
                            <telerik:RadToolBarButton Text="Export To Excel"
                                                        PostBack="true"
                                                        CommandName="ExportToExcel" />
                            <telerik:RadToolBarButton Text="Export To Word"
                                                        PostBack="true"
                                                        CommandName="ExportToWord" />
                            <telerik:RadToolBarButton Text="Export To Pdf"
                                                        PostBack="true"
                                                        CommandName="ExportToPdf" />
                        </Buttons>
                    </telerik:RadToolBarDropDown>

                    <telerik:RadToolBarButton Text="Save Updates" Value="BulkUpdateSave" CommandName="BulkUpdateSave" PostBack="true" Visible="false" />

                    <telerik:RadToolBarButton IsSeparator="true" Value="Separator5" />

                    <telerik:RadToolBarButton Text="Cancel Updates" Value="BulkUpdateCancel" CommandName="BulkUpdateCancel" PostBack="true" Visible="false" />

                </Items>
            </telerik:RadToolBar>
        </CommandItemTemplate>
    </MasterTableView>
    <ClientSettings AllowColumnsReorder="false">
        <Resizing AllowRowResize="false" AllowColumnResize="true" EnableRealTimeResize="false" ResizeGridOnColumnResize="false" />
    </ClientSettings>
    <PagerStyle Mode="Slider" Position="TopAndBottom" />
</telerik:RadGrid>

[Pavlina]

Hello Dan,

Note that it is not recommended to use ItemStyle-Width to set column widths. Only HeaderStyle-Width should be used.

Give it a try and see if it helps.

Best wishes,
Pavlina
the Telerik team