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

RadGrid Height 100% & ScrollHeight 100%

16 Answers 1461 Views

Grid

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

Kris asked on 25 Jun 2008, 10:23 PM

I'm trying to setup a RadGrid in a Table that has a height and width set to 100% so that it can expand and contract as the user resizes their browser (I'm only using IE). Inside the table I'd like to setup the RadGrid so that it will automatically expand and contract to fill the container (table cell) and to scroll the records when necessary. In other words, I want the column headers to stay fixed at the top, the paging portion to stay fixed at the bottom and the scroll bar to show up for the data records if the page is not large enough to display all the records.

FYI... the records per page is a variable loaded at runtime.

I've found some other threads in the forum that talk about different work arounds using javascript at runtime. I've tried this and it works sometimes. But due to the complexity of my page, when some of the other javascript on the page executes it causes the RadGrid to collaps in size so that only the header, footer and a sliver of one record is visible. There has to be a more stable way.

If I try to set the RadGrid height to 100% and the scroll height to 100% the grid also shriks its height to almost nothing.

16 Answers, 1 is accepted

answered on 26 Jun 2008, 04:24 PM

Removing the ScrollHeight="100%" from the scrolling object didn't make a difference. I did however find somthing interesting. I'm using a RadAjaxManager to try and "AJAXify" the grid. When I select the RadGrid in the RadAjaxManager configuration tool the height colapses to nothing. If I remove the RadGrid from the RadAjaxManager then the grid appears normally.

Here is a sample of my .ascx. Note: this is contained in a user control.

@ Control Language="vb" AutoEventWireup="false" CodeBehind="GridViewer.ascx.vb" Inherits="FS.Web.GridViewer" %>

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

telerik:RadScriptManager ID="ScriptManager1" runat="server"

EnableTheming="True">

telerik:RadScriptManager>

telerik:RadAjaxManager runat="server"

ID="RadAjaxManager1">

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<telerik:AjaxUpdatedControl ControlID="RadGrid1"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

telerik:RadAjaxManager>

table id="tblMain" cellpadding="0" cellspacing="0"

style

="border: thick solid yellow; table-layout: fixed; width: 100%;height:100%">

<tr>

<telerik:RadToolBar ID="RadToolBar1" Runat="server" Skin="Inox" Width="100%">

</telerik:RadToolBar>

</td>

</tr>

<tr>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True"

AutoGenerateColumns="False" GridLines="None"

Skin="Office2007" Width="100%" AllowMultiRowSelection="True" AllowSorting="True"

Height="100%" >

</exportsettings>

</RowIndicatorColumn>

</ExpandCollapseColumn>

<telerik:GridBoundColumn DataField="UID" HeaderText="UID" UniqueName="UID">

</telerik:GridBoundColumn>

</Columns>

</EditFormSettings>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="True" AllowColumnsReorder="True"

ReorderColumnsOnClient="True">

</ClientSettings>

</telerik:RadGrid>

</td>

</tr>

table>

telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"

height="100%" InitialDelayTime="1" Transparency="30" width="100%" BackColor="#E0E0E0"

HorizontalAlign="Center">

<img alt="Loading..."

src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.LoadingProgressBar.gif") %>'

style="border: 0px; margin-top: 200px;" />

telerik:RadAjaxLoadingPanel>

answered on 27 Jun 2008, 07:04 AM

Hello Kris,

This is indeed a strange issue and unfortunately from the provided information I am not able to determine the exact reason for the abnormality you encountered. Can you please check whether the sample project from the first post of the following code library entry:

http://www.telerik.com/community/code-library/submission/b311D-keegm.aspx

works as expected on your machine and utilize the same approach to see whether this helps? Alternatively, consider changing the height of the grid at runtime (in accordance with the height of its container) as illustrated in this help article.

Kind regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 27 Jun 2008, 02:38 PM

The example in the code library didn't make any difference. As I mentioned before, the height properties work as expected for me when the grid is tied to the Ajax Manager (the example in the code library doesn't use the Ajax Manager).

I did find however, that the help article did provide some relief. The GridCreated function at the client side appears to work for me without conflicting with any of my other scripts and is called durring an Ajax postback.

The only thing I'm missing is, the GridCreated function calculates the scroll height by subtracting the grid header height from the container height. In my case my grid also has a grid footer for the paging controls and I can't figure out how to get the height of that piece of the grid. Any advice on this one?

answered on 27 Jun 2008, 11:20 PM

Another issue I've found today.

While the grid now fit's 100% on GridCreated at runtime (assuming I hard code the footer height), there are now some client events that are causing the grid to shrink back to nothing.

Let me start with an overview. My page is made up of a parent page that contains a few of the asp.net Rad controls (menu, toolbar, multipage, etc...). Within the parent page there is an IFrame that points to a child page. This child page contains a user control that in-turn contains the RadGrid control that is having the 100% height issue when the Ajax is turned on.

The issue that I've found is that when I do a mouseover on any of the responding Rad controls in the parent page (the menu bar for example), the RadGrid in the child page will shrink back down to virtually to nothing.

Again, I've only been experiencing the issue when I tie the AjaxManager to the RadGrid control.

Finally, I don't have an AjaxManager on the parent page but there is a ScriptManager. One theory I have is, could there be a conflict between the two ScriptManagers and/or the AjaxManager in relationship the the parent page and the child page in the IFrame?

answered on 30 Jun 2008, 02:15 PM

Hi Kris,

This is indeed a strange issue you stumbled upon and unfortunately from the information provided so far I am not able to determine the exact reason for the abnormality.

Is it possible that you perform some custom calculations when hovering items on the main page which may rollback the height dimension changes you made inside the OnGridCreated handler? I suggest you debug your client code and it this is the case, invoke the OnGridCreated handler explicitly to ensure that the grid height will be applied accordingly.

If this does not help, I suggest you provide a live url where the discrepancy can be observed or isolate a stripped working version of your project to examine it locally. Thus I will do everything possible to assist you in resolving the issue you are currently facing.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 17 Jul 2008, 03:32 PM

I created a simple example which demonstrates the problem.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Sample Page</title> 
        
                <style type="text/css"> 
        
                   html{width: 100%; height: 100%; margin: 0px;}  
        
                   body{width: 100%; height: 100%; margin: 0px;}  
        
                   form{width: 100%; height: 100%; margin: 0px;}  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                    </telerik:RadScriptManager> 
        
                    <telerik:RadGrid Width="100%" Height="100%" ID="RadGrid1" runat="server" AllowPaging="False" GridLines="None"> 
        
                        <MasterTableView> 
        
                            <RowIndicatorColumn> 
        
                                <HeaderStyle Width="20px" /> 
        
                            </RowIndicatorColumn> 
        
                            <ExpandCollapseColumn> 
        
                                <HeaderStyle Width="20px" /> 
        
                            </ExpandCollapseColumn> 
        
                        </MasterTableView> 
        
                        <ClientSettings> 
        
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
        
                        </ClientSettings> 
        
                    </telerik:RadGrid><telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                </form> 
        
            </body> 
        
            </html>

    
            using System; 
        
            using System.Data; 
        
            using System.Configuration; 
        
            using System.Collections; 
        
            using System.Web; 
        
            using System.Web.Security; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using System.Web.UI.WebControls.WebParts; 
        
            using System.Web.UI.HtmlControls; 
        
            public partial class Sample : System.Web.UI.Page 
        
            { 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    DataTable dt = new DataTable(); 
        
                    dt.Columns.Add("ID"); 
        
                    dt.Columns.Add("Random"); 
        
                    dt.Columns.Add("ABC"); 
        
                    dt.Columns.Add("DEF"); 
        
                    dt.Columns.Add("GH"); 
        
                    Random r = new Random(); 
        
                    for (int i = 0; i < 50; i++) { 
        
                        DataRow dr = dt.NewRow(); 
        
                        dr["ID"] = i + ""; 
        
                        dr["Random"] = r.NextDouble() + ""; 
        
                        dt.Rows.Add(dr); 
        
                    } 
        
                    RadGrid1.DataSource = dt; 
        
                    RadGrid1.DataBind(); 
        
                } 
        
            }

answered on 21 Jul 2008, 01:04 PM

RadControlsASPNETAJAXTestSiteNET2.zip

Hello Ed,

Indeed I was able to recreate the problem under Gecko-based browsers and it is due to the fact the wrapping elements like divs (injected by the dynamically generated update panels produced by RadAjaxManager) does not have height value set. You can observe the same issue when nesting your grid instance inside standard MS UpdatePanel.

To bypass the glitch you can set explicitly the height of the update panel in which the grid is embedded with the approach presented in the sample web site attached to this forum post.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 01 Oct 2008, 10:37 AM

RadControlsASPNETAJAXTestSiteNET2.zip

Hi Ian,

I tried to recreate the issue by adding 'select' GridButtonColumn to my previous demo and testing it under IE/FireFox browser but unfortunately to no avail (see the attached project). Merely vertical scroll was displayed for the grid instance on initial load or after selecting an arbitrary record in it.

Can you please verify that on your machine? Any further details concerning different configuration settings you may have can help us determine the cause of the abnormality to address it asap. Note that I used that latest hotfix 2008.2.826 of RadControls for ASP.NET AJAX in my tests.

Best regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 04 Jun 2015, 06:46 AM

I have a splitter with two grids, selecting a row in grid one displays results in grid two. Grid one is filtered based on one of three radio buttons. Initially I had the problem listed above where after connecting grid one and the radio buttons to a rad ajax manager the grid appeared squashed. I used the solution above and the grid appeared full height again....great or so I thought.

When I added grid two to the ajax manager, grid one reverted to being squashed although grid two appeared normally!

Is there some way to implement this solution for multiple grids in different panes of a splitter?

Cheers

Geoff