radgrid 100% height Chrome

8 posts, 0 answers
  1. dany7487
    dany7487 avatar
    88 posts
    Member since:
    Jan 2008

    Posted 16 May 2009 Link to this post

    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 style="width: 100%" border="0" cellpadding="0" cellspacing="0">

     

    ...

     

     

     

     

     

    </table>

     

     

     

    <table style="width:100%;height:100%" border="0" cellspacing="0" cellpadding="0">

     

     

     

    <tr>

     

     

     

    <td valign="top" style="width:100%;height:100%">

     

    <

     

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

     

    ...

     

     

     

    <MasterTableView DataSourceID="odsClientes" DataKeyNames="intIDCodigoCliente_fl" Width="100%" TableLayout="Fixed"">

     

    ...

     

    </

     

    telerik:RadGrid>

     

     

    </td>

     

     

     

    </tr>

     

     

     

    </table>

     

     

     

    </telerik:RadPane>

     

    </

     

    telerik:RadSplitter>

     

     

     

     

     


    Thanks for your time,
    Daniel.

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 May 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. dany7487
    dany7487 avatar
    88 posts
    Member since:
    Jan 2008

    Posted 25 May 2009 Link to this post

    Hi, Dimo.
    I have been several days with this with no results. I tried the code you told me but I could not make it.
    I have submitted the support ticket: 214834 to see if you can do me a favor to look at the project.
    thanks a lot,
    Daniel.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 May 2009 Link to this post

    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.
  6. Joe
    Joe avatar
    13 posts
    Member since:
    Jul 2010

    Posted 11 Oct 2010 Link to this post

    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.
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Oct 2010 Link to this post

    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
  8. Prashanth
    Prashanth avatar
    6 posts
    Member since:
    Jan 2013

    Posted 17 Jan 2013 Link to this post

    Hi,

      I recently upgraded my telerik rad controls . My project  was running successfully in Ie7,Ie 8, But not in Ie9, Ie10 and chrome.Buttons and drop down list are not working properly. Please Let me know How to make work in Chorme and New versions of Ie10. I am using the latest rad controls Q3 2012.

    Thanks in Advance,
    Prashanth.
  9. Galin
    Admin
    Galin avatar
    526 posts

    Posted 22 Jan 2013 Link to this post

    Hello Prashanth,

    I am afraid the issue you are facing is not replicable on our side. Could you please give us more details on what you are trying to achieve or possibly a small running project that we can use to reproduce the case.
    Alternatively a live URL will help us as well.

    All the best,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017