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

Column headers do not scroll horizontally with the grid

23 Answers 1056 Views

Grid

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

thepilsbury asked on 28 Sep 2009, 07:56 PM

Hi,

I have a grid which has a mixture of fixed header widths and others as follows:

    
                        <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnItemDataBound="RadGrid1_ItemDataBound" 
        
                            GridLines="None" OnNeedDataSource="RadGrid1_NeedDataSource" AllowSorting="True" 
        
                            ShowGroupPanel="True" Height="100%" Width="100%" AccessKey="G" AllowPaging="True" 
        
                            PageSize="5" ShowStatusBar="True" EnableLinqExpressions="False" OnPreRender="RadGrid1_PreRender">  
        
                            <ExportSettings IgnorePaging="true" OpenInNewWindow="true">  
        
                                <Pdf AllowAdd="false" AllowCopy="true" AllowModify="true" AllowPrinting="true" Author="Anonymous" 
        
                                    Keywords="None" PageBottomMargin="1in" PageLeftMargin="1in" PageRightMargin="1in" 
        
                                    PageTopMargin="1in" PageTitle="RadGrid export document" Subject="RadGrid Export" 
        
                                    Title="RadGrid export" /> 
        
                            </ExportSettings> 
        
                            <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True" 
        
                                EnableRowHoverStyle="True" AllowGroupExpandCollapse="False">  
        
                                <Selecting AllowRowSelect="True" EnableDragToSelectRows="False" /> 
        
                                <ClientEvents OnRowContextMenu="RadGrid1_OnRowContextMenuHandler" OnRowDblClick="RadGrid1_OnRowDblClickHandler" 
        
                                    OnGridCreated="RadGrid1_OnGridCreated" /> 
        
                                <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
        
                                <Resizing AllowColumnResize="True" /> 
        
                            </ClientSettings> 
        
                            <HeaderContextMenu EnableTheming="True">  
        
                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                            </HeaderContextMenu> 
        
                            <GroupPanel ID="GroupPanel" Style="width: 100%;">  
        
                            </GroupPanel> 
        
                            <PagerStyle AlwaysVisible="True" Mode="NextPrevAndNumeric" /> 
        
                            <MasterTableView ClientDataKeyNames="ID,IsLocked,IsLockedByMe,CurrentWorkflowActivityName,CurrentWorkFlowActivityTypeID,IsReferenced" 
        
                                DataKeyNames="ID,IsLocked,LockedById,UserAction,UserActionDescription,UserActionType,IsActionedByMe,IsReadByMe,InForce,ActionedByMeOn,ExpiryDate,InRedraft,ActionByDate,ActualExpiryDate,StateTypeID,ApprovalComment,ApproveByDate,Status,Approved,ReviewByDate,ReviewComment,Reviewed,IsOrphaned" 
        
                                RetrieveAllDataFields="False" Width="100%" GridLines="None">  
        
                                <Columns> 
        
                                    <telerik:GridButtonColumn ButtonType="ImageButton" Resizable="False" ShowSortIcon="False" 
        
                                        UniqueName="Icon">  
        
                                        <HeaderStyle Width="18px" /> 
        
                                        <ItemStyle Wrap="False" /> 
        
                                    </telerik:GridButtonColumn> 
        
                                    <telerik:GridBoundColumn DataField="Name" HeaderText="Subject" DataFormatString="<nobr>{0}</nobr>" 
        
                                        UniqueName="Name">  
        
                                        <HeaderStyle Width="190px" /> 
        
                                        <ItemStyle Wrap="False" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="DocRef" HeaderText="Reference" DataFormatString="<nobr>{0}</nobr>" 
        
                                        UniqueName="DocRef">  
        
                                        <HeaderStyle Width="170px" /> 
        
                                        <ItemStyle Wrap="False" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="Version" HeaderText="Version" DataFormatString="<nobr>{0}</nobr>" 
        
                                        UniqueName="Version">  
        
                                        <HeaderStyle Width="45px" /> 
        
                                        <ItemStyle Wrap="False" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="EditorName" HeaderText="Editor" DataFormatString="<nobr>{0}</nobr>" 
        
                                        UniqueName="Editor">  
        
                                        <ItemStyle Wrap="False" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="Owner" HeaderText="Owner" DataFormatString="<nobr>{0}</nobr>" 
        
                                        UniqueName="Owner">  
        
                                        <ItemStyle Wrap="False" /> 
        
                                        <HeaderStyle Width="160px" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="Status" HeaderText="State" DataFormatString="<nobr>{0}</nobr>" 
        
                                        UniqueName="Status">  
        
                                        <ItemStyle Wrap="False" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="InForce" HeaderText="Published" DataFormatString="<nobr>{0:d}</nobr>" 
        
                                        UniqueName="InForce" Visible="false">  
        
                                        <ItemStyle Wrap="False" /> 
        
                                        <HeaderStyle Width="100px" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="ExpiryDate" HeaderText="Expiry" DataFormatString="<nobr>{0:d}</nobr>" 
        
                                        UniqueName="Expiry" Visible="false">  
        
                                        <HeaderStyle Width="100px" /> 
        
                                        <ItemStyle Wrap="False" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="UserActionDescription" HeaderText="Action" DataFormatString="<nobr>{0}</nobr>" 
        
                                        UniqueName="Action">  
        
                                        <ItemStyle Wrap="False" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="Rank" HeaderText="Rank" UniqueName="Rank" Visible="False">  
        
                                        <HeaderStyle Width="20px" /> 
        
                                        <ItemStyle Wrap="False" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                </Columns> 
        
                                <SortExpressions> 
        
                                    <telerik:GridSortExpression FieldName="Name" SortOrder="Ascending" /> 
        
                                </SortExpressions> 
        
                            </MasterTableView> 
        
                            <FilterMenu EnableTheming="True">  
        
                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                            </FilterMenu> 
        
                        </telerik:RadGrid>

Now when the grid is populated with data that means that a row is wider than the container a horizontal scroll bar is added. When the scroll bar is scrolled over to the right to see the rest of the row, the column headers do not scroll with the data.

23 Answers, 1 is accepted

answered on 20 Apr 2011, 12:53 PM

scrolling-with-static-headers.zip

Hi Neetu,

I am sending you a test page which demonstrates how you can enable scrolling with static headers. Please examine it and let me know if it helps.

Greetings,
Pavlina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 20 Apr 2011, 03:25 PM

telerikscroll.png

I tried to set Wrap = false like in your example. Also tried to set headerstyle width for each column but I could not get this to work. I have filter controls on the grid. When the page first gets rendered it is fine but if I change the filter the header loses the scroll...I still have a scoll on the items.

Please see attached image.

answered on 31 Jul 2013, 06:08 PM

I am having the same issue using the newest telerik version (2013.2.717.40).

Is UseStaticHeaders literally mean headers are static both for vertical and horizontal scrolling? I need static headers for vertical scrolling, however for horizontal, I need the headers to stick to the data... like Excel.

Any way to make this happen?

I am defining my grid OnInit(), not that it should make a difference. I have followed the Telerik examples as well as looked at your sample... everything is set correctly. I notice this is happening on all my grids.

Any additional suggestions would be appreciated ASAP.

answered on 01 Aug 2013, 03:55 AM

Hi Jared,

I have tried a similar scenario,and the code works fine at my end,I'm using the same version as mentioned.Please try the below code snippet.If this doesn't help,can you please provide your code.

C#:

protected void Page_Init(object sender, System.EventArgs e)

{

DefineGridStructure();

}

private void DefineGridStructure()

{

RadGrid grid = new RadGrid();

grid.ID = "RadGrid1";

grid.DataSourceID = "SqlDataSource1";

grid.PageSize = 15;

grid.AllowPaging = true;

grid.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;

grid.AutoGenerateColumns = false;

grid.ClientSettings.Scrolling.AllowScroll = true;

grid.ClientSettings.Scrolling.UseStaticHeaders = true;

//Add Customers table

grid.MasterTableView.DataKeyNames = new string[] { "CustomerID" };

//Add columns

GridBoundColumn boundColumn = new GridBoundColumn();

grid.MasterTableView.Columns.Add(boundColumn);

boundColumn.DataField = "CustomerID";

boundColumn.HeaderText = "Customer ID";

this.PlaceHolder1.Controls.Add(grid);

}

Thanks,
Princy

answered on 01 Aug 2013, 03:29 PM

Thanks Princy, however, it doesn't work on my side. I did notice that as soon as I removed setting a static header width, it does work. I have grids all through my our system and all have the same behavior. I removed the static width and it worked. Support for combining static and non-static columns needs to be supported. Some columns I need to stick at a certain width while others can vary in width... also, a min-width would be excellent too.

Thanks for your help... guess i'll have to go old school and scroll the container div... just another Telerik hack! I am a pro at hacking these controls now.

answered on 10 Nov 2013, 01:41 PM

Since 2009, different people wrote posts in this thread, about the same issue, and it seems that you still don't understand the problem.

I have the same issue.
When you have a lot of columns, and a lot of rows, you have both horizontal and vertical scroll bars.
You expect that the static headers will keep the headers static when the user scrolls vertically, but when the user scrolls horizontally, you want that the body of the grid to be scrolled together with the headers.
The UseStaticHeaders should be applied only for vertical scrolling.

But this is not what happens.
The horizontal scrolling affects only the body. The headers are always static.
It causes the data in the grid not to match the columns above.

I'm searching for a solution for hours.
Unfortunately, as Jared Lewis suggested above, I'm now trying to put the grid inside a containing div, canceling the horizontal scroll bar of the grid with
.rgDataDiv
{
overflow-x: hidden !important;
}
and then scroll the containing div horizontally instead.
An ugly solution in my opinion.

If you have any other suggestion, I'll be happy to hear about it.

Thanks,
Guy.

answered on 14 Nov 2013, 09:16 AM

Hello Guy,

The reason for writing posts with similar issues is the fact that there are some specifics in using static headers. If you want to enable static headers it is required to have fixed widths set in px for grid columns through HeaderStyle-Width and TableLayout property to be Fixed. Can you verify that you have these properties set in your project and that you are using the latest version of the controls?

Additionally, keep in mind that if you have fixed width set for the grid you should leave one column without width(for example the last one). More information about setting column width is available in this forum thread.

Regards,
Pavlina
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 17 Nov 2013, 02:25 PM

Hi Pavlina,

I set the TableLayout to 'Fixed', and gave all columns a fixed width in pixels.
I've done it before writing you my first comment because I saw that suggestion in few replies in similar posts.

I don't know if it matters, but I have grouping columns in my grid (I tried also giving these grouping columns a width, and not only the regular columns, but it didn't help).
In addition, I build my columns in the code-behind, in a foreach, during page load. This is why I didn't leave one column without a width.

I'm using version 2013.2.717.40.
Not the newest version, but one before (can't upgrade now).

Thanks,
Guy.

answered on 18 Nov 2013, 01:30 PM

Hi,

We solved it by giving a width to the grouping columns, and to the ItemStyle, and not giving any width to the HeaderStyle.

For each column group:

var gridColumnGroup = new GridColumnGroup

{

HeaderText = entity,

Name = entity,

};

gridColumnGroup.HeaderStyle.Width = Unit.Pixel(200);

GridViewControl.MasterTableView.ColumnGroups.Add(gridColumnGroup);

And for each column (two columns under each column group):

gridBoundColumn.ItemStyle.Width = Unit.Pixel(99);

And not:

gridBoundColumn.HeaderStyle.Width = Unit.Pixel(100);

Now the columns are static only for vertical scrolling, and not for horizontal scrolling, as it supposed to be.

Maybe it's different because of the complicated grid (column groups, footer, horizontal scrolling, vertical scrolling, static headers).

Thanks,
Guy.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Column headers do not scroll horizontally with the grid

23 Answers, 1 is accepted