Column headers do not scroll horizontally with the grid

24 posts, 0 answers
  1. thepilsbury
    thepilsbury avatar
    36 posts
    Member since:
    Jan 2007

    Posted 28 Sep 2009 Link to this post

    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.
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 29 Sep 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. thepilsbury
    thepilsbury avatar
    36 posts
    Member since:
    Jan 2007

    Posted 30 Sep 2009 Link to this post

    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.
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 02 Oct 2009 Link to this post

    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.
  6. Neetu
    Neetu avatar
    7 posts
    Member since:
    Dec 2010

    Posted 18 Apr 2011 Link to this post

    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.
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 20 Apr 2011 Link to this post

    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.

  8. Neetu
    Neetu avatar
    7 posts
    Member since:
    Dec 2010

    Posted 20 Apr 2011 Link to this post

    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.
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 21 Apr 2011 Link to this post

    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.

  10. wnl
    wnl avatar
    106 posts
    Member since:
    Aug 2007

    Posted 18 May 2012 Link to this post

    I have the same issue. Is any solution?
  11. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 18 May 2012 Link to this post

    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.
  12. Jared Lewis
    Jared Lewis avatar
    9 posts
    Member since:
    Feb 2010

    Posted 31 Jul 2013 Link to this post

    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.
  13. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 31 Jul 2013 Link to this post

    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
  14. Jared Lewis
    Jared Lewis avatar
    9 posts
    Member since:
    Feb 2010

    Posted 01 Aug 2013 Link to this post

    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.
  15. Segev
    Segev avatar
    27 posts
    Member since:
    Sep 2010

    Posted 10 Nov 2013 Link to this post

    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.
  16. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 14 Nov 2013 Link to this post

    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.
  17. Segev
    Segev avatar
    27 posts
    Member since:
    Sep 2010

    Posted 17 Nov 2013 Link to this post

    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.
  18. Segev
    Segev avatar
    27 posts
    Member since:
    Sep 2010

    Posted 18 Nov 2013 Link to this post

    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.
  19. Pranitha
    Pranitha avatar
    2 posts
    Member since:
    Dec 2013

    Posted 17 Dec 2013 Link to this post

    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?
  20. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 18 Dec 2013 Link to this post

    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.
  21. Santele
    Santele avatar
    15 posts
    Member since:
    Jul 2013

    Posted 01 Jul 2015 Link to this post

    Hello,

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

  22. Santele
    Santele avatar
    15 posts
    Member since:
    Jul 2013

    Posted 02 Jul 2015 Link to this post

    Solved by trial n erro with header style itemstyle widths . ADMIN- can u pls remove above code??
  23. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 02 Jul 2015 Link to this post

    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
  24. Santele
    Santele avatar
    15 posts
    Member since:
    Jul 2013

    Posted 03 Jul 2015 in reply to Pavlina Link to this post

    Thank you Pavilina,  This post saved me a day work!
  25. jjroman
    jjroman avatar
    4 posts
    Member since:
    Mar 2007

    Posted 23 Nov 2015 in reply to Santele Link to this post

    Hi, 

    How did you solve it?

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017