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

radgrid 100% height Chrome

7 Answers 371 Views

Grid

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

dany7487 asked on 17 May 2009, 01:46 AM

Hello, Telerik,
I´m using a radgrid with 100% height and it works fine with Internet Explorer but I can not get it work with Chrome, where it seems to have 1% height, instead of 100%, so my grid is not visible.
This was working for me with Chrome and radcontrols for asp.net version, but now with rad controls for asp.net ajax and Chrome, it does not work,
Here is some parts of my code, I know I have to put height=100% to all the parent tags:
Can you help me, please.

body style="height:100%;margin:0px;padding:0;" scroll="no">
<form id="form1" enctype="multipart/form-data" runat="server" style="height:100%"

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:Panel ID="pnlExterior" runat="server" Width="100%" Height="100%" DefaultButton="ibtEnter">

telerik:RadCodeBlock ID="radcodigo" runat="server">

...

</telerik:RadCodeBlock>

telerik:RadSplitter ID="radsplitPagina" runat="server" Width="100%" Height="100%" Skin="Outlook" Orientation="horizontal" OnClientLoaded="FocoSplitterLoad">

<telerik:RadPane ID="radpanArriba" runat="server" Width="100%" Height="116px" Scrolling="None" CssClass="CeldaFondoClara">

...

telerik:RadPane>

<telerik:RadPane ID="radpanPagina" runat="server" Width="100%" Height="100%" Scrolling="None" CssClass="PosicionRelativa">

...

</table>

<tr>

telerik:RadGrid ID="gvw1" runat="server" AllowPaging="True" PageSize="25" Width="99.5%" Height="99%"

AllowSorting="True" AutoGenerateColumns="False" DataSourceID="odsClientes" GridLines="Horizontal" Skin="Yunke" EnableEmbeddedSkins="false"

OnItemDataBound="gvw1_ItemDataBound" OnSelectedIndexChanged="gvw1_SelectedIndexChanged">

...

...

telerik:RadGrid>

</td>

</tr>

</table>

</telerik:RadPane>

telerik:RadSplitter>

Thanks for your time,
Daniel.

7 Answers, 1 is accepted

answered on 19 May 2009, 11:19 AM

Hello Daniel,

Here are two examples, which contain a 100% high RadGrid. Please compare with your implementation and make the necessary corrections.

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

Here is one more example:

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script runat="server"> 
        
            protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        
            { 
        
                DataTable dt = new DataTable(); 
        
                DataRow dr; 
        
                int colsNum = 4; 
        
                int rowsNum = 40; 
        
                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> 
        
            <!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 runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            <style type="text/css"> 
        
            html 
        
            { 
        
                overflow:hidden; 
        
            } 
        
            html,body,form 
        
            { 
        
                margin:0; 
        
                padding:0; 
        
                height:100%; 
        
            } 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="Horizontal"> 
        
                <telerik:RadPane ID="RadPane1" runat="server" Height="100px"> 
        
                    top pane - 100px high 
        
                </telerik:RadPane> 
        
                <telerik:RadPane ID="RadPane2" runat="server"> 
        
                    <table style="width:100%;height:100%" border="0" cellspacing="0" cellpadding="0"> 
        
                        <tr> 
        
                            <td style="height:100%"> 
        
                                <telerik:RadGrid 
        
                                    ID="RadGrid1" 
        
                                    runat="server" 
        
                                    Height="100%" 
        
                                    style="border:0;outline:none" 
        
                                    OnNeedDataSource="RadGrid_NeedDataSource"> 
        
                                    <ClientSettings> 
        
                                        <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        
                                    </ClientSettings> 
        
                                </telerik:RadGrid> 
        
                            </td> 
        
                        </tr> 
        
                    </table> 
        
                </telerik:RadPane> 
        
            </telerik:RadSplitter> 
        
            </form> 
        
            </body> 
        
            </html>

All the best,
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.

answered on 26 May 2009, 07:33 AM

Hello Daniel,

Thank you for the sample project. The problem is caused by missing height style for the update panel <div>, which is generated around RadGrid. Please refer to the following example, which shows how to get the update panel's client ID by using the AjaxSettingCreated event and add a 100% height CSS style:

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

Here is an excerpt from the above example ( DefaultCS.aspx )

C#

    
                public string RadGrid1PanelClientID; 
        
                protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e) 
        
                { 
        
                    if (e.Initiator.ID == "RadGrid1") 
        
                    { 
        
                        this.RadGrid1PanelClientID = e.UpdatePanel.ClientID; 
        
                    } 
        
                }

CSS (must be in the <head> of the page)

    
            #<%= RadGrid1PanelClientID %> 
        
            { 
        
                margin:0; 
        
                height:100%; 
        
            }

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.

answered on 11 Oct 2010, 04:40 PM

Dimo, Glad to have found this thread as it fixed my issues with Radgrid not consuming all avail screen space. Confirmed that simply removing the RadAjaxManager fixes the radgrid height issue that dany brought up, although I'm also experiencing the issue with IE.

Since this thread is older, are there any updates as to if this issue is going to be resolved within the RadAjaxManager, as the suggested solution seems to be somewhat of a work-around. I believe that the RadAjaxManager should respect the specified attributes (width/height) of the wrapped controls & not impose any unsuspected side-effects. Couldn't the RadAjaxManager simply check to see if the wrapped controls have width/height/etc specified and implicitly take on those attributes itself (via the generated wrapping div)?

--Joe.

answered on 12 Oct 2010, 07:45 AM

Hello Joe,

This has been implemented in RadControls Q2 2010 (2010.2.713) - you should set the update panel height manually though, as the RadAjaxManager cannot guess all possible scenarios, and moreover, the updated control's height might be set on the client.

<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelHeight="100%" />
</UpdatedControls>

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

radgrid 100% height Chrome

7 Answers, 1 is accepted