Grid height 100% not working

[Adrian]

Hello,

I have a lot of trouble setting the grid's height to 100%. I know there are a lot of posts for this problem, and some solutions, but they didn't work for me. This is my code.

<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
 <tr style="width: 100%; height: 100%">
  ...
 <td style="width: 100%; height: 100%">
   <table id="_ctl8" cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
   <tr height="100%">
                        <td height="100%">
                            <table id="_ctl10" class="crpObjectBorder" cellspacing="0" cellpadding="0" border="0"
                                width="100%" height="100%">
                                <tr>
                                    <td>
                                        <table class="crpTabBar" cellspacing="0" cellpadding="1" border="0" width="100%"
                                            height="100%">
                                            <tr>
                                                <td class="bottomborder titleBar" id="pageTitle">
                                                    &nbsp; Search results
                                                </td>
                                            </tr>
                                            <tr style="height: 100%; width: 100%">
                                                <td class="crpDataPanel" style="height: 100%; width: 100%">
                                                    <div id="divRadGrid" style="height: 100%; width: 100%">
                                                        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
                                                        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
                                                            OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated">
                                                            <AjaxSettings>
                                                                <telerik:AjaxSetting AjaxControlID="gridSearchResOrders">
                                                                    <UpdatedControls>
                                                                        <telerik:AjaxUpdatedControl ControlID="gridSearchResOrders" LoadingPanelID="RadAjaxLoadingPanel1" />
                                                                    </UpdatedControls>
                                                                </telerik:AjaxSetting>
                                                                <telerik:AjaxSetting AjaxControlID="gridSearchResOrderLines">
                                                                    <UpdatedControls>
                                                                        <telerik:AjaxUpdatedControl ControlID="gridSearchResOrderLines" LoadingPanelID="RadAjaxLoadingPanel1" />
                                                                    </UpdatedControls>
                                                                </telerik:AjaxSetting>
                                                            </AjaxSettings>
                                                        </telerik:RadAjaxManager>

                                                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
                                                            Width="75px" Transparency="10">
                                                            <img alt="Loading..." src="../images/loading.gif" style="border: 0px;" />
                                                        </telerik:RadAjaxLoadingPanel>

                                                            <telerik:RadSplitter ID="Splitter" runat="server" Width="100%" Height="100%" Orientation="Horizontal">
                                                            <telerik:RadPane ID="RadPane" runat="server" Height="100%" Width="100%" BorderStyle="None">
                                                            <!-- Grid: Orders search results -->
                                                            <telerik:RadGrid ID="gridSearchResOrders" runat="server" GridLines="None" AllowPaging="True"
                                                                ImagesPath="~/styles/Grid" AllowSorting="True" AutoGenerateColumns="False" OnNeedDataSource="gridSearchResOrders_NeedDataSource"
                                                                Skin="MyGray" EnableAJAX="true" EnableEmbeddedSkins="False" BorderWidth="1" Width="100%" Height="100%"
                                                                HorizontalAlign="Center" EnableEmbeddedBaseStylesheet="False" AllowMultiRowEdit="false">

My problem is that in IE 7 and Safari 3 the grid has a fixed sized of 10px, and in Firefox 3, the headers are huge, occupying almost the whole screen, while the grid content has a 10px height size.
I have tried to put the grid inside a pane and a splitter like suggested here http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx . But this example only works on IE. Testing it on Firefox 3 or Safari 3 I've noticed that it doesn't work, the grid being resized to 10px.
I have made 2 screenshots of the grid, running in Firefox 3 and in IE 7.
Grid in Firefox 3
Grid in IE 7

I am using C#, ASP.NET 2.0, Telerik 2008.03.1125.20 on IE 7 and Firefox 3 on Windows XP.

Any suggestions? Is it something i'm doing wrong. I've spent too much time on this already.

Many thanks,
Adrian.

[Dimo]

Hi Adrian,

In order to make RadGrid 100% high, its parent element should have a height style defined explicitly. This is according to the CSS specification.

When RadGrid is ajaxified, it is wrapped inside an update panel, which does not have a height style. Here is how to add one:

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

Best wishes,
Dimo
the Telerik team

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

[Adrian]

Thank you for your quick reply.
I have followed that link, implemented the solution like you can see in the code i have posted. Or maybe i didn't understand the solution: wrapping the grid inside a RadPanel that is nested inside a RadSplitter.
And i did read before in other posts, that the parent height should be done explicitly. That's why i've implemented your solution, but in my case it doesn't work. Maybe because my grid in inside a table?

I also have a rad code block inside the head element:

 <telerik:radcodeblock id="RadCodeBlock1" runat="server">
        <style type="text/css">
            html
            {
                overflow: auto;
            }
            html, body, form, #<%= PanelClientID %>
            {
                margin:0;height:100%;
            }
        </style>
    </telerik:radcodeblock>

And in the code behind file, the following code:

protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e)
{
    this.PanelClientID = e.UpdatePanel.ClientID;
}

What am i missing? Can you tell?

Thank you,
Adrian.

[Dimo]

Hi Adrian,

I see that you are using a sequence of nested 100% high HTML elements. However, the table with a CSS class of crpTabBar is placed inside a table cell with no height.

When using a sequence of 100% high elements, the topmost element must have a parent with a height set in pixels or the topmost element must be the <html> element with a height of 100%.

Please review your code and add missing height:100% styles.

Sincerely yours,
Dimo
the Telerik team

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

[Adrian]

Hey Dimo,

Thank you for your tips. So far i have managed to make it work on Firefox 3 and on Safari 3, but not on IE 7.
In IE 7 still, the grid renders correctly for like half a second, then the content shrinks to 10px.

This is the full source code :

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	<telerik:radcodeblock id="RadCodeBlock1" runat="server">
	<style type="text/css">
	html
	{
	overflow: hidden;
	}
	html, body, form, #<%= PanelClientID %>
	{
	margin:0; height:100%; width:100%;
	}
	</style>
	</telerik:radcodeblock>
	<title>Desk&reg; CVI</title>
	<link rel="Stylesheet" href="../styles/frameset.css" />
	<link rel="Stylesheet" href="../styles/MyGray.css" />
	<link rel="Stylesheet" href="../styles/PanelGray.css" />
	<link rel="Stylesheet" href="../styles/orderHistory.css" />
	</head>
	<body style="margin: 0px; height: 100%">
	<form id="form1" runat="server">
	<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
	<tr style="width: 100%; height: 100%">
	<td style="width:250px; height:100%" />
	<td class="menuseperatorbar">
	<div>
	&nbsp;</div>
	</td>
	<td style="width: 100%; height: 100%">
	<table id="_ctl8" cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
	<!-- START - Spacing around the crpObjectBorder -->
	<tr>
	<td width="5" rowspan='2'>
	<span lang="en-us"></span>
	</td>
	<td width="5" rowspan='2'>
	</td>
	</tr>
	<!-- END - Spacing around the crpObjectBorder -->
	<tr style="height: 100%; width: 100%">
	<td style="height: 100%; width: 100%">
	<table id="_ctl10" class="crpObjectBorder" cellspacing="0" cellpadding="0" border="0"
	width="100%" height="100%">
	<tr style="height: 100%; width: 100%">
	<td style="height: 100%; width: 100%">
	<table class="crpTabBar" cellspacing="0" cellpadding="1" border="0" width="100%"
	height="100%">
	<tr style="height: 20px; width:100%">
	<td class="bottomborder titleBar" id="pageTitle" style="height: 20px; width:100%">
	&nbsp; Search results
	</td>
	</tr>
	<tr style="height: 100%; width: 100%">
	<td class="crpDataPanel" style="height: 100%; width: 100%">
	<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
	<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
	OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated">
	<AjaxSettings>
	<telerik:AjaxSetting AjaxControlID="gridSearchResOrders">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="gridSearchResOrders"  />
	</UpdatedControls>
	</telerik:AjaxSetting>
	<telerik:AjaxSetting AjaxControlID="gridSearchResOrderLines">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="gridSearchResOrderLines" />
	</UpdatedControls>
	</telerik:AjaxSetting>
	</AjaxSettings>
	</telerik:RadAjaxManager>
	<telerik:RadSplitter ID="Splitter" runat="server" Width="100%" Height="100%" Orientation="Horizontal" BorderWidth="0">
	<telerik:RadPane ID="RadPane" runat="server" Height="100%" Width="100%" BorderStyle="None" Scrolling="None">
	<!-- Grid: Orders search results -->
	<telerik:RadGrid ID="gridSearchResOrders" runat="server" GridLines="None" AllowPaging="True"
	ImagesPath="~/styles/Grid" AllowSorting="True" AutoGenerateColumns="False" OnNeedDataSource="gridSearchResOrders_NeedDataSource"
	Skin="MyGray" EnableAJAX="true" EnableEmbeddedSkins="False" BorderWidth="1" Width="100%" Height="100%"
	HorizontalAlign="Center" EnableEmbeddedBaseStylesheet="False" AllowMultiRowEdit="false">
	<FooterStyle HorizontalAlign="Left" VerticalAlign="Bottom" />
	<PagerStyle AlwaysVisible="True" HorizontalAlign="Left" Mode="NextPrevAndNumeric"
	VerticalAlign="Bottom" />
	<MasterTableView DataKeyNames="D_Order_ID" NoDetailRecordsText="No order lines to display."
	NoMasterRecordsText="No orders to display." ShowFooter="True" TableLayout="Fixed"
	ItemStyle-Wrap="false" HeaderStyle-Wrap="false" >
	...
	</MasterTableView>
	<ClientSettings>
	<Selecting AllowRowSelect="False" />
	<Scrolling AllowScroll="true" UseStaticHeaders="true" />
	</ClientSettings>
	<FilterMenu EnableTheming="True">
	<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
	</FilterMenu>
	</telerik:RadGrid>
	</telerik:RadPane>
	</telerik:RadSplitter>
	</div>
	</td>
	</tr>
	<%-- <tr style="height: 22px;">
	<td>
	&nbsp;
	</td>
	</tr>--%>
	</table>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	<!-- START - Spacing around the crpObjectBorder -->
	<tr>
	<td height="5" colspan='3'>
	</td>
	</tr>
	<!-- END - Spacing around the crpObjectBorder -->
	</table>
	</td>
	</tr>
	</table>
	</form>
	</body>
	</html>

I haven't included any doctypes, because then the whole layout gets screwed. I haven't missed any height="100%" for any table cells.
What can cause the problem for IE 7?

Thank you,
Adrian.

[Dimo]

Hi Adrian,

The page works on my side, please check the code in AjaxSettingCreated and make sure that the ClientID is correctly rendered in the CSS rule.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    public string PanelClientID;

    protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e)
    {
        if (e.Initiator.ID == "gridSearchResOrders")
        {
            PanelClientID = e.UpdatePanel.ClientID;
        }
    }

    protected void gridSearchResOrders_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 5;
        int rowsNum = 2000;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <telerik:radcodeblock id="RadCodeBlock1" runat="server">
        <style type="text/css">
            html
            {
                overflow: hidden;
            }
            html, body, form, #<%= PanelClientID %>
                {
                    margin:0; height:100%; width:100%;
                }
            </style>
        </telerik:radcodeblock>

        <title>Desk&reg; CVI</title>




    </head>
    <body style="margin: 0px; height: 100%">
        <form id="form1" runat="server">
        <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
            <tr style="width: 100%; height: 100%">
                <td style="width:250px; height:100%" />
                <td class="menuseperatorbar">
                    <div>
                        &nbsp;</div>

                </td>
                <td style="width: 100%; height: 100%">
                    <table id="_ctl8" cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
                        <!-- START - Spacing around the crpObjectBorder -->
                        <tr>
                            <td width="5" rowspan='2'>
                                <span lang="en-us"></span>
                            </td>
                            <td width="5" rowspan='2'>
                            </td>
                        </tr>
                        <!-- END - Spacing around the crpObjectBorder -->
                        <tr style="height: 100%; width: 100%">
                            <td style="height: 100%; width: 100%">
                                <table id="_ctl10" class="crpObjectBorder" cellspacing="0" cellpadding="0" border="0"
                                    width="100%" height="100%">
                                    <tr style="height: 100%; width: 100%">
                                        <td style="height: 100%; width: 100%">
                                            <table class="crpTabBar" cellspacing="0" cellpadding="1" border="0" width="100%"
                                                height="100%">
                                                <tr style="height: 20px; width:100%">
                                                    <td class="bottomborder titleBar" id="pageTitle" style="height: 20px; width:100%">
                                                        &nbsp; Search results
                                                    </td>
                                                </tr>
                                                <tr style="height: 100%; width: 100%">
                                                    <td class="crpDataPanel" style="height: 100%; width: 100%">

                                                            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
                                                            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated">
                                                                <AjaxSettings>
                                                                    <telerik:AjaxSetting AjaxControlID="gridSearchResOrders">
                                                                        <UpdatedControls>
                                                                            <telerik:AjaxUpdatedControl ControlID="gridSearchResOrders"  />
                                                                        </UpdatedControls>
                                                                    </telerik:AjaxSetting>
                                                                    <telerik:AjaxSetting AjaxControlID="gridSearchResOrderLines">
                                                                        <UpdatedControls>
                                                                            <telerik:AjaxUpdatedControl ControlID="gridSearchResOrderLines" />
                                                                        </UpdatedControls>
                                                                    </telerik:AjaxSetting>
                                                                </AjaxSettings>
                                                            </telerik:RadAjaxManager>


                                                                <telerik:RadSplitter ID="Splitter" runat="server" Width="100%" Height="100%" Orientation="Horizontal" BorderWidth="0">
                                                                <telerik:RadPane ID="RadPane" runat="server" Height="100%" Width="100%" BorderStyle="None" Scrolling="None">
                                                                <!-- Grid: Orders search results -->
                                                                <telerik:RadGrid ID="gridSearchResOrders" runat="server" GridLines="None" AllowPaging="True"
                                                                    AllowSorting="True" OnNeedDataSource="gridSearchResOrders_NeedDataSource"
                                                                    Skin="Gray" BorderWidth="1" Width="100%" Height="100%"
                                                                    HorizontalAlign="Center" AllowMultiRowEdit="false">
                                                                    <FooterStyle HorizontalAlign="Left" VerticalAlign="Bottom" />
                                                                    <PagerStyle AlwaysVisible="True" HorizontalAlign="Left" Mode="NextPrevAndNumeric"
                                                                        VerticalAlign="Bottom" />
                                                                    <MasterTableView NoDetailRecordsText="No order lines to display."
                                                                        NoMasterRecordsText="No orders to display." ShowFooter="True" TableLayout="Fixed"
                                                                        ItemStyle-Wrap="false" HeaderStyle-Wrap="false" ></MasterTableView>
                                                                    <ClientSettings>
                                                                        <Selecting AllowRowSelect="False" />
                                                                        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                                                                    </ClientSettings>
                                                                </telerik:RadGrid>
                                                                </telerik:RadPane>
                                                                </telerik:RadSplitter>


                                                            </div>

                                                    </td>
                                                </tr>
                                               <%-- <tr style="height: 22px;">
                                                    <td>
                                                        &nbsp;
                                                    </td>
                                                </tr>--%>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <!-- START - Spacing around the crpObjectBorder -->
                        <tr>
                            <td height="5" colspan='3'>
                            </td>
                        </tr>
                        <!-- END - Spacing around the crpObjectBorder -->
                    </table>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>

All the best,
Dimo
the Telerik team

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

[Adrian]

  Weird thing... I have just modified my code in the RadAjaxManager1_AjaxSettingCreated method to check if my grid initiated the request, and now it works.

  Thank you very much Dimo.

Best regards,
Adrian.

[Teodorico]

Dimo,

The provided example worked perfectly, but the rendering performance is really low and has an odd behavior.

If I create a grid set at 100% width and height with no Splitter/Pane, it does resize almost instantly when resizing the IE window. It is smooth.

If I place the same grid inside a Splitter/Pane, there is a notorious lag in the rendering when resizing the window. Also:

·         If I resize the window to a greater size, the grid resizes to fill the window (with a lag).

·         If I reduce the window size, the grid resizes smaller than the window area (smaller) and then grows back to fill it completely, producing a bouncing effect.

 

Is there any way to improve the rendering performance of the Splitter/Pane?

Is there another way to set height to 100% on ajaxified grids?

 

Thanks.

[Dimo]

Hi Teodorico,

Generally, you don't need to use RadSplitter to make RadGrid with static headers expand vertically to 100%, but using RadSplitter may help you do it more easily. This is because splitter panes always have widths and heights in pixels - set programmatically on the client. I am afraid that these width/height calculations slow down the resizing a little, expecially in IE.

If you don't use RadSplitter, you will have to make sure that the RadGrid parent element has explicit height. You will also have to continue setting a 100% height to the RadGrid update panel, there is no way to avoid this, unless you want to set heights on the client with Javascript.

As for your question why the splitter resizes in two steps when the browser window is resized to a smaller size - this is expected to occur if the <HTML> element's overflow style is set to "auto" - please set it to "scroll" or "hidden" to prevent the bouncing effect.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nathan J Pledger]

Hi,

I've run through this thread and other resources on your site in order to try and develop a means of resizing my grids, but so far the suggestions are a little too "hacky" for my solution.

I have a splitter, which will load user controls within each pane. The nature of the user control is unknown.

The splitter fires the OnClientResized event, which is then bubbled across to the user controls on the client-side in each pane. Thereby, allowing each pane to resize according to its new dimensions.

One or more of the user controls will house a radGrid.

If you can assume that the resize event is raised on the client, how is it possible to resize the grid much like the example on the older RadGrid example at http://demos.telerik.com/aspnet/controls/examples/integration/gridandsplitterresizing/defaultvb.aspx?product=grid? Remember I am in a usercontrol so don't have access to the Page's RaisePostBackEvent event for overloading. I have an AjaxManager in my containing page which I could use.

[Nathan J Pledger]

I've got it sorted (more or less). This solution allows me to "broadcast" a resize event across my panels, having each one resize accordingly.

Each Panel has an "invisible" <a> tag which acts as an event proxy.

<a id="migClickEventProxy_<UniqueSplitterID>" class="eventWrapper" href="#"  style="display: none"></a>

Each Panel defines an event handler for the OnClientResized event. I used a GUID to create a unique function name. This event handler uses some jQuery to locate the anchor tag and trigger the click event on the anchor tag, sending in some details of the actual event:

function radSplitter<UniqueSplitterID>_OnClientResized(sender, args)  {

    var v=$('#'+sender.get_id()+' a.eventWrapper').trigger( {
             type:'click',subType:'splitterPaneResize',resizedPanelID:sender.get_id(),oldWidth:args.get_oldWidth(),oldHeight:args.get_oldHeight(),newWidth:sender.get_width(),newHeight:sender.get_height()
        }
);

    }

and some more jQuery attaches an event handler onto the anchor tag (NOTE: the ID must be the same as the <a> tag. I'm using sender.get_id() here, but you should replace your logic to identify the <a> tag - I'm avoiding putting in the dictionary I have come up with):

$('#'+sender.get_id()+' a.eventWrapper').click(
            function(event) {
                switch (event.subType)
                {
                    case 'splitterPaneResize':
                        // fire back to server to rebind grid
                        sizeModule(event.newHeight);
                    break;
                }

            });

    function sizeModule(newHeight) {
            <%=ajaxManager.ClientID %>.ajaxRequest('resizegrid_Height='+newHeight);
        }

The sizeModule() function creates an argument ("resizegrid_Height=xxx") and calls the following C# thanks to RadAjaxManager within *a* module:

private void AjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            if (e.Argument.StartsWith("resizegrid_Height="))
            {
                //radGridUsers.PageSize = 5;
                string newHeightAsString=e.Argument.Substring("resizegrid_Height=".Length);
                int newHeight=int.Parse(newHeightAsString);
                radGridUsers.Height = newHeight- 65;
            }
                }

... which resizes the grid that was within the module/user control. Each User Control can then react differently according to its contents, either on the client or - if necassary - returning to the server for some AJAX work like rebinding the grid, etc.

I'd be interested if you think I have barked completely up the wrong tree on this!

[Dimo]

Hi Nathan,

Thanks for the detailed information. I am afraid that your approach is rather complex, however, in order to suggest a more simpler way to achieve the desired behavior, I will need a simple runnable application or a live URL, so that I can see what exactly you are trying to do.

Here is a general hint - if you use a separate RadSplitter in some of your user controls and RadGrid is placed in its own RadPane, you will be able to resize RadGrid without any difficulties, given that you configure the RadPane to resize according to your needs (e.g. - set a suitable height in percent or in pixels).

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nathan J Pledger]

Hi Dimo,

I need the grid to use VirtualScrolling, which seems to want to have to go back to the server to set the property. 

I am concerned about the performance of this method, particularly the complexity so would be pleased to get a good solution out of this.

I actually have a ticket open related to this: #193202. I will post details on how to get access to the application on there shortly.

Thanks for your help.