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

[Solved] RadGrid 100% Height

1 Answer 499 Views

Grid

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

Vme asked on 31 Aug 2009, 07:05 PM

For some reason RadGrid 100% height works, in IE 8.0 and Chrome, but not in compatability mode for IE 8.0. Could someone please help out on why this is not working with what I believe is IE 7.0 engine? Thank you very much!!

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="logs.aspx.cs" Inherits="NetINFO.Logs" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head id="Head2" runat="server">  
        
                <title>Application Logs</title> 
        
                <style type="text/css">  
        
                    html, body, form  
        
                    {  
        
                        background-color: rgb(133,170,238);  
        
                        margin: 0px;  
        
                        padding: 0px;  
        
                        border: 0px;  
        
                        height: 100%;  
        
                        font-size: 12px;  
        
                    }  
        
                    html  
        
                    {  
        
                        overflow: auto;  
        
                    }  
        
                    #topBar  
        
                    {  
        
                        margin: 0;  
        
                        margin-bottom: 0em;  
        
                        font-size: 100%;  
        
                        color: white;  
        
                        padding: 0 1em;  
        
                        font-family: Verdana,sans-serif;  
        
                        height: 20px;  
        
                        line-height: 20px;  
        
                        background-color: rgb(133,170,238);  
        
                    }  
        
                    #content  
        
                    {  
        
                        position: absolute;  
        
                        top: 66px;  
        
                        bottom: 26px;  
        
                        width: 100%;  
        
                        background-color: White;  
        
                    }  
        
                    #copyright  
        
                    {  
        
                        position: absolute;  
        
                        bottom: 0;  
        
                        margin: 0;  
        
                        width: 100%;  
        
                        border-top: 1px solid #999;  
        
                        height: 25px;  
        
                        line-height: 25px;  
        
                    }  
        
                    #copyright p  
        
                    {  
        
                        margin: 0 1em;  
        
                        font-size: 80%;  
        
                        font-style: italic;  
        
                    }  
        
                    #calendar  
        
                    {  
        
                        width: 100%;  
        
                        height: 25px;  
        
                        background-color: rgb(133,170,238);  
        
                        border-bottom: 1px solid #999;  
        
                    }  
        
                    #applicationBar  
        
                    {  
        
                        width: 100%;  
        
                        height: 20px;  
        
                    }  
        
                    #username  
        
                    {  
        
                        float: right;  
        
                        padding-right: 1em;  
        
                    }  
        
                    #applicationName  
        
                    {  
        
                        float: left;  
        
                        padding-left: 1em;  
        
                        height: 20px;  
        
                        width: 294px;  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form2" runat="server">  
        
                <asp:ScriptManager ID="ScriptManager2" runat="server" /> 
        
                <div id="topBar">  
        
                    <div id="applicationName">  
        
                        100% Height RadGrid</div> 
        
                    <div id="username">  
        
                        <asp:Label ID="lblUserName" runat="server" Text=""></asp:Label> 
        
                    </div> 
        
                </div> 
        
                <div id="applicationBar">  
        
                    <telerik:RadMenu ID="App_Menu" runat="server" Skin="Vista" Width="100%" Style="top: 0px;  
        
                        left: 0px"> 
        
                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                        <Items> 
        
                            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">  
        
                            </telerik:RadMenuItem> 
        
                        </Items> 
        
                    </telerik:RadMenu> 
        
                </div> 
        
                <div id="calendar">  
        
                    <div style="width: 250px;">  
        
                        <telerik:RadDatePicker ID="dtmLogFilter" runat="server" AutoPostBack="True" Culture="English (United States)" 
        
                            OnSelectedDateChanged="dtmLogFilter_SelectedDateChanged" Skin="Web20">  
        
                            <DateInput AutoPostBack="True">  
        
                            </DateInput> 
        
                            <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" 
        
                                Skin="Web20">  
        
                            </Calendar> 
        
                            <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton> 
        
                        </telerik:RadDatePicker> 
        
                    </div> 
        
                </div> 
        
                <div id="content">  
        
                    <telerik:RadGrid ID="grdLogs" runat="server" OnNeedDataSource="grdLogs_NeedDataSource" 
        
                        AutoGenerateColumns="False" Skin="Office2007" AllowSorting="True" AllowFilteringByColumn="True" 
        
                        GridLines="None" ShowGroupPanel="True" Height="100%">  
        
                        <ClientSettings AllowDragToGroup="True">  
        
                            <Scrolling AllowScroll="true" ScrollHeight="100%" UseStaticHeaders="True" SaveScrollPosition="true" /> 
        
                        </ClientSettings> 
        
                        <HeaderContextMenu Skin="Office2007">  
        
                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                        </HeaderContextMenu> 
        
                        <MasterTableView> 
        
                            <Columns> 
        
                                <telerik:GridBoundColumn DataField="LogEntryDate" HeaderText="LogEntryDate">  
        
                                    <ItemStyle Width="120px" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn DataField="Application" HeaderText="Application">  
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn DataField="Category" HeaderText="Category">  
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn DataField="SubCategory" HeaderText="Sub Category">  
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn DataField="User" HeaderText="User Name">  
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn DataField="Message" HeaderText="Message">  
        
                                </telerik:GridBoundColumn> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                        <FilterMenu EnableTheming="True">  
        
                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                        </FilterMenu> 
        
                    </telerik:RadGrid> 
        
                </div> 
        
                <div id="copyright">  
        
                    <p> 
        
                        &copy;2009 Me. All rights reserved.</p> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

1 Answer, 1 is accepted

answered on 01 Sep 2009, 07:24 AM

Hello Vme,

Actually, I am surprised that your page works in IE8, it shouldn't.

The problem is caused by a missing height style for the "content" <div>. According to the web standards, elements with a percentage height require their parents to have an explicit height style.

Since the "content" div has to expand and occupy all available vertical space, except the page header and footer, you have two options:

1) calculate the height on client page init:

        <script type="text/javascript">

            Sys.Application.add_init(setContentHeight);

            function setContentHeight()
            {
                $get("content").style.height = ....;
            }

        </script>

or

2) use a RadSplitter based layout. RadSplitter calculates the height of resizable containers (panes) automatically.

For more information and working demos, please refer to:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx

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

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.