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

Column headers do not scroll horizontally with the grid

23 Answers 481 Views
Grid
This is a migrated thread and some comments may be shown as answers.
thepilsbury
Top achievements
Rank 1
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

Sort by
0
Pavlina
Telerik team
answered on 29 Sep 2009, 08:27 AM
Hi Darren,

RadGrid headers remain static if UseStaticHeaders property is set to "True". Please try setting this property to "False" and see if it helps.

Regards,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
thepilsbury
Top achievements
Rank 1
answered on 30 Sep 2009, 09:09 AM
That doesn't work for me. The behaviour I require is static headers (in the sense that when the user scrolls vertically the headers remain in place) and non-static when the user scrolls horizontally (so that the columns horizontal grid lines match up with the headers)

Thanks.
0
Pavlina
Telerik team
answered on 02 Oct 2009, 02:47 PM
Hi,

Attached to this message is a simple working project which handles the desired functionality. Please give it a try and let me know if it works for you or if I am leaving something out.

I hope this helps.

Kind regards,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Neetu
Top achievements
Rank 1
answered on 18 Apr 2011, 09:24 PM
I am having the same issue where I need the static headers and scrollbar is not added to my header. I don't see any attached code. Could you please attach the code.
0
Pavlina
Telerik team
answered on 20 Apr 2011, 12:53 PM
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.

0
Neetu
Top achievements
Rank 1
answered on 20 Apr 2011, 03:25 PM
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.
0
Pavlina
Telerik team
answered on 21 Apr 2011, 09:44 AM
Hi Neetu,

Based on the provided information we can not determine why you experience this problem. Could you please send us a live url or a small project which demonstrates the issue?

Kind regards,
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.

0
wnl
Top achievements
Rank 1
answered on 18 May 2012, 09:48 AM
I have the same issue. Is any solution?
0
Pavlina
Telerik team
answered on 18 May 2012, 02:25 PM
Hi,

Can you check if the issue you are facing persists with the latest version of RadControls for ASP.NET AJAX?

All the best,
Pavlina
the Telerik team
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 their blog feed now.
0
Jared Lewis
Top achievements
Rank 1
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.
0
Princy
Top achievements
Rank 2
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
0
Jared Lewis
Top achievements
Rank 1
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.
0
Segev
Top achievements
Rank 1
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.
0
Pavlina
Telerik team
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.
0
Segev
Top achievements
Rank 1
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.
0
Segev
Top achievements
Rank 1
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.
0
Pranitha
Top achievements
Rank 1
answered on 17 Dec 2013, 10:24 AM
We are facing the same problem when we integrate in dynamics crm. However it is noticed that after a post back or refresh happens, it starts working fine. We tried to explicitly invoke post back and refresh but in vain. Any way to get out of this?
0
Pavlina
Telerik team
answered on 18 Dec 2013, 11:50 AM
Hi Pranitha,

Can you specify which version of RadControls you are using? The described problem should not persists with the latest version of the controls.

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.
0
PuriTelerik
Top achievements
Rank 1
answered on 01 Jul 2015, 08:56 PM

Hello,

facing the same problem. Could only do wither vertical or horizantal NOT both.Using the Headerstyle width property.

0
PuriTelerik
Top achievements
Rank 1
answered on 02 Jul 2015, 04:20 PM
Solved by trial n erro with header style itemstyle widths . ADMIN- can u pls remove above code??
0
Pavlina
Telerik team
answered on 02 Jul 2015, 08:54 PM
Hello,

The code is removed.

Regards,
Pavlina
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
PuriTelerik
Top achievements
Rank 1
answered on 03 Jul 2015, 02:33 PM
Thank you Pavilina,  This post saved me a day work!
0
jjroman
Top achievements
Rank 2
answered on 23 Nov 2015, 08:30 PM

Hi, 

How did you solve it?

Tags
Grid
Asked by
thepilsbury
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
thepilsbury
Top achievements
Rank 1
Neetu
Top achievements
Rank 1
wnl
Top achievements
Rank 1
Jared Lewis
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Segev
Top achievements
Rank 1
Pranitha
Top achievements
Rank 1
PuriTelerik
Top achievements
Rank 1
jjroman
Top achievements
Rank 2
Share this question
or