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

Gap below horizontal scrollbar on initial page load

2 Answers 64 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kellie
Top achievements
Rank 1
Kellie asked on 25 Nov 2010, 09:57 PM
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 Answers, 1 is accepted

Sort by
0
Kellie
Top achievements
Rank 1
answered on 25 Nov 2010, 10:42 PM
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.
0
Dimo
Telerik team
answered on 26 Nov 2010, 04:32 PM
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.
Tags
Grid
Asked by
Kellie
Top achievements
Rank 1
Answers by
Kellie
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or