Column headers do not scroll horizontally with the grid

[thepilsbury]

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.

[Pavlina]

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.

[thepilsbury]

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.

[Pavlina]

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.

[Neetu]

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.

[Pavlina]

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

[Neetu]

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.

[Pavlina]

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

[wnl]

I have the same issue. Is any solution?

[Pavlina]

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

[Jared Lewis]

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.

[Princy]

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

[Jared Lewis]

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.

[Segev]

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.

[Pavlina]

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

[Segev]

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.

[Segev]

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.

[Pranitha]

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?

[Pavlina]

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

[PuriTelerik]

Hello,

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

[PuriTelerik]

Solved by trial n erro with header style itemstyle widths . ADMIN- can u pls remove above code??

[Pavlina]

Hello,

The code is removed.

Regards,
Pavlina
Telerik

[PuriTelerik]

Thank you Pavilina,  This post saved me a day work!

[jjroman]

Hi, 

How did you solve it?