This is a migrated thread and some comments may be shown as answers.

[Solved] Horizontal Scrolling with Static Headers and show columns

1 Answer 181 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Dan asked on 01 Nov 2010, 06:56 PM

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>

[Solved] Horizontal Scrolling with Static Headers and show columns

1 Answer, 1 is accepted