Gap below horizontal scrollbar on initial page load

3 posts, 0 answers
  1. Kellie
    Kellie avatar
    29 posts
    Member since:
    Feb 2009

    Posted 25 Nov 2010 Link to this post

    I have a strange problem occurring on my grid.

    My grid has a detailtable and expand/collapse button. It uses a setting FrozenColumnsCount="3" .
    On initial load of the page, the grid shows a gap below the Horizontal scrollbar. Also, the frozen columns do not work on this initial load.
    Please see attached screen shots.

    I found if I removed  FrozenColumnsCount="3" from the grid, the problem does not occur. This might be a coincidence though??
    I also found, if I click the expand button, the problem disappears.

    This might be too hard to troubleshoot what is causing this, but I need some guidance as to a 'workaround'. As I said above, the problem disappears when clicking expand. Do you know what part of the expand code is fixing this?

    Some background information. My grid is underneath a table. I have some javascript that calculates the grid's splitter height based on a parent container minus the table height. This appears to work successfully, but I thought I would share this in case it could be influencing the problem.
    <telerik:RadSplitter ID="RadSplitterRoadRoadwayGrid" runat="server" Width="100%" Orientation="Vertical"
                    BorderSize="0" VisibleDuringInit="false" OnClientLoad="setSplitterHeight">
                    <telerik:RadPane ID="RadPaneRoadRoadwayGrid" runat="server" Scrolling="None" BorderWidth="0"
                        Width="100%">

    // Calculates the height of the grid on the fly.
    function setSplitterHeight(splitter, arg) {
        var myAjaxPanel = document.getElementById('<%= RadAjaxPanelRoadRoadway.ClientID %>');
        var panelHeight = myAjaxPanel.parentNode.parentNode.clientHeight;
        var myTable = document.getElementById('myTable');
        var tableHeight = myTable.clientHeight;
        splitter.set_height(panelHeight - tableHeight - 36);
        var pane = splitter.GetPaneByIndex(0);
        pane.set_height(panelHeight - tableHeight - 36);        
    }

    I am also applying column widths at runtime. The way I am doing this is shown in the following post:
    http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-set-column-width-in-code-behind-for-detailtable.aspx

    Thank you for any insight into this problem!
    Kellie
  2. Kellie
    Kellie avatar
    29 posts
    Member since:
    Feb 2009

    Posted 25 Nov 2010 Link to this post

    I have actually created a simplified project showing the problem. I will create a ticket for it.
    If I receive a solution, I will post the answer here so that those having the same problem will know how to fix it.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Nov 2010 Link to this post

    Hi Kellie,

    Currently there is a limitation in the RadGrid control, which prevents it from properly initializing its layout and functionality when scrolling with static headers (and frozen columns as well) are enabled. This has been fixed and changes will take effect in the next RadControls internal build and official release (Q3 2010 SP1, due somewhere in mid December).

    Currently you can avoid the problem by setting RenderSelectedPageOnly="true" to the RadMultiPage control and using AJAX to switch between tabs/pageviews.

    By the way, RadGrid column widths should be set with HeaderStyle-Width only, not ItemStyle-Width.

    Sincerely yours,
    Dimo
    the Telerik team
    Browse the vast support resources we have to jumpstart 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.
Back to Top