RadGrid Height 100% & ScrollHeight 100%

[Kris]

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.

[Shinu]

Hi Kris,

Try setting the UseStaticHeader property to true to make the Column headers fixed.

ASPX:

 <ClientSettings >
   <Scrolling UseStaticHeaders="true" AllowScroll="true" />
 </ClientSettings>

Thanks
Shinu.

[Kris]

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">

 

<ClientEvents/>

 

<AjaxSettings>

 

<telerik:AjaxSetting AjaxControlID="RadGrid1">

 

<UpdatedControls>

 

<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>

 

<td valign="top">

 

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

 

<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

</telerik:RadToolBar>

 

</td>

 

</tr>

 

<tr>

 

<td valign="top" style="border: medium solid Red; height:100%">

 

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

AutoGenerateColumns="False" GridLines="None"

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

Height="100%" >

 

<exportsettings filename="Export" ignorepaging="True" openinnewwindow="True">

 

</exportsettings>

 

<ItemStyle Wrap="True" />

 

<MasterTableView>

 

<RowIndicatorColumn Visible="False">

 

<HeaderStyle Width="20px"></HeaderStyle>

 

</RowIndicatorColumn>

 

<ExpandCollapseColumn Visible="False" Resizable="False">

 

<HeaderStyle Width="20px"></HeaderStyle>

 

</ExpandCollapseColumn>

 

<Columns>

 

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

 

</telerik:GridBoundColumn>

 

</Columns>

 

<EditFormSettings>

 

<PopUpSettings ScrollBars="None"></PopUpSettings>

 

</EditFormSettings>

 

<PagerStyle Mode="NextPrevAndNumeric" />

 

</MasterTableView>

 

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

ReorderColumnsOnClient="True">

 

<selecting allowrowselect="True" />

 

<ClientEvents OnRowDblClick="RowDblClick" />

 

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="100%" />

 

<Resizing AllowColumnResize="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>

[Sebastian]

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

[Kris]

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?

[Kris]

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?

[Sebastian]

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

[Mark Ly]

Hi,

I'm having the same problem as well ... I've isolated it to an issue with setting Height="100%" on the RadGrid when the grid is 'ajaxified' by being attached to an RadAjaxManager. If RadAjaxManager.EnableAJAX=false, everything is fine.

regards,
Mark

[Sebastian]

Hello Mark,

Can you replicate the problem by modifying the sample project from the code library thread linked previously? Then merely send the updated version attached to a formal support ticket or specify the differences in order to reproduce the issue on my local machine. Thus I will do everything possible to provide an accurate resolution.

Best regards,
Stephen
the Telerik team

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

[Ed Bassin]

I too am having this problem.  After the upgrade to the 2008 version, adding a RadAjaxManager to the grid makes it's height really small.

[Ed Bassin]

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();
    }
}

[Sebastian]

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

[Ian Coetzer]

Hi

Ok, i also had the problem, downloaded the solution and it improved the problem ... now whenever i for example click on my select column links in the grid and it does a successfull ajax postback of the rad grid only their appears a horizontal and vertical scrollbar on the page which makes the grid just off to the left and bottom of the page having to scroll?

how can i force it to not create those scrollbars after the first ajaxsified postback?

thanks

[Sebastian]

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.

[Geoff]

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

 

[Angel Petrov]

Hi Geoff,

A possible solution for the problem is provided in this code library. Please examine its implementation, give it a try and let us know if additional questions arise.

Regards,
Angel Petrov
Telerik

[Geoff]

That worked a treat thank you so much.

Geoff