Telerik

Code Library

Skip Navigation LinksHome / Community / Code Library / ASP.NET and ASP.NET AJAX > Grid > Setting 100% height and resize on container resize for grid with scrolling and static headers

Setting 100% height and resize on container resize for grid with scrolling and static headers

Feed from this thread
  • Telerik Admin MVP avatar

    Posted on Oct 12, 2006 (permalink)

    Requirements
    RadGrid version

    4.x or Telerik.Web.UI 2007.3.12.18+
    .NET version

    2.0
    Visual Studio version

    VS 2005
    programming language

    C#, Javascript
    browser support

    all browsers supported by RadGrid


    NOTE: Thе project GridWith100PercHeightAndResizeOnBrowserResize.zip refers to RadGrid versions prior to 4.5.0. For RadGrid versions 5+ and 2007.3.12.18+ use the aproach without any javascript logic attached in grid_100_width_height.zip.
    PROJECT DESCRIPTION
    This sample project demonstrates how to configure r.a.d.grid to occupy 100% height of its container (or the total browser window height) with scrolling and static headers enabled. Note that you will need to use DOCTYPE HTML 4.0 Transitional (the XHTML STRICT doctype has a limitation related to 100% height for html table elements).
    Keep in mind that if the grid is nested inside containers, at least one of them should have fixed height dimension in pixels. Thus the control will calculate its dimensions in regards with this container pixel height.

    You can also review this forum thread for more available options.

  • Telerik Admin admin's avatar

    Posted on Oct 13, 2006 (permalink)

    Additionally, if you enable the paging feature of the grid, you will need to modify the code in the script block as follows:

        <script type="text/javascript">  
            function Resize()  
            {  
                setTimeout(function(){  
                var scrollArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridData");  
                if(scrollArea)  
                {  
                    scrollArea.style.height = document.body.offsetHeight + "px";  
                }             
               if(window["<%= RadGrid1.ClientID %>"].ClientSettings.Scrolling.UseStaticHeaders)  
               {  
                   var header = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridHeader");  
                   scrollArea.style.height = document.body.offsetHeight - header.offsetHeight + "px";  
               }  
               if(window["<%= RadGrid1.ClientID %>"].ClientSettings.Scrolling.UseStaticHeaders && document.getElementById("<%= RadGrid1.ClientID %>" + "_ctl01_Pager"))  
               {  
                  var pagerArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_ctl01_Pager");  
                  scrollArea.style.height = document.body.offsetHeight - header.offsetHeight - pagerArea.offsetHeight + "px";  
               }  
               }, 200);  
           }  
            windowwindow.onresize = window.onload = Resize;  
        </script> 

    Best,
    Stephen
    the telerik team

  • John Stewart Intermediate avatar

    Posted on Mar 1, 2007 (permalink)

    Hello,

    I have been asking about the ability to resize a grid within a div tag at 100% height, 100% width, and Scroll Header = True for a year and half now. I was told then (8/23/2005) that it would be put in the queue for development. 

    If it is possible why not include it in the control instead of having us do these time consuming work arounds? I never know when something doesn't work right if it is me or there is code issues with these work arounds.

    Thanks,
    John

  • Telerik Admin admin's avatar

    Posted on Mar 2, 2007 (permalink)

    Hello John,

    I am happy to inform you that we have dedicated some time in improving the current auto-resizing with scrolling and static headers behavior of r.a.d.grid. We will introduce a brand new rendering for the next hotfix of the product (4.5.2), scheduled later today. With this release you will not have to use javascript code to handle the resizing action as it will be supported out-of-the-box when setting percentage height/width for the grid instance.

    However, note that at least one of the containers which wrap the control should have fixed dimensions. Only thus the grid will be able to calculate its percentage height/width values in par with the container settings.

    Best regards,
    Stephen,
    the telerik team

  • John Stewart Intermediate avatar

    Posted on Mar 2, 2007 (permalink)

    Hello,

    Thanks for the update. I will give it a try.

    I am a little confused with your statement:
    However, note that at least one of the containers which wrap the control should have fixed dimensions.

    This condition seems to contradict the idea of resizing a container. Perhaps I am misunderstanding the condition.

    Thanks again for the news.

    Regards,
    John

  • Telerik Admin admin's avatar

    Posted on Mar 2, 2007 (permalink)

    Hi John,

    Please visit this form thread and let us know what you think.

    Best wishes,
    Vlad
    the telerik team

  • John Stewart Intermediate avatar

    Posted on Mar 3, 2007 (permalink)

    Hello,

    The grid is working as desired at this point.

    Thanks!
    John

  • Dindin avatar

    Posted on Mar 8, 2007 (permalink)

    Hi all !

    I've tried to configure r.a.d.grid to occupy 100% height of the brower (with the 4.5.2 release).
    That works fine as long as the 'Grid' is not in a 'table' :

        <form id="form1" runat="server">  
          
    <%--        <table border="0" width="100%" height="100%" id="table1" cellspacing="1" cellpadding="0">  
                <tr> 
                    <td>--%> 
     
                        <radG:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" Height="99%" Width="99%" 
                            runat="server" OnColumnCreated="RadGrid_ColumnCreated">  
                            <ClientSettings> 
                                <Resizing AllowColumnResize="true" /> 
                                <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
                            </ClientSettings> 
                        </radG:RadGrid> 
                          
    <%--                </td> 
                </tr>      
            </table>--%> 
              
            <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Nwind.mdb" SelectCommand="SELECT CustomerID, ContactName, ContactTitle FROM Customers" runat="server"></asp:AccessDataSource> 
     
        </form> 

    If you uncomment the 'table', the 'radgrid' have not his height to 100%.
    Any idea?

    Thank you

  • Telerik Admin admin's avatar

    Posted on Mar 8, 2007 (permalink)

    Hello Bertrand,

    As I have mentioned in one of my previous posts:

    However, note that at least one of the containers which wrap the control should have fixed dimensions. Only thus the grid will be able to calculate its percentage height/width values in par with the container settings.

    Therefore, make sure that the table or one of the parent containers (if available) has fixed height in pixels. Thus the height of the grid will be calculated properly in conjunction with its containers dimensions. You may find worthwhile reviewing the forum post linked by my colleague Vlad.

    Best,
    Stephen
    the telerik team

  • Dindin avatar

    Posted on Mar 8, 2007 (permalink)

    Thank you for the quick reply !! :)

    Ho, ok, but in my exemple, if you replace :

    <table border="0" width="100%" height="100%" id="table1" cellspacing="1" cellpadding="0"> 

    by this :

    <table border="0" width="100%" height="1000px" id="table1" cellspacing="1" cellpadding="0"> 

    the probleme is the same, and my container (the table) have a fixed dimensions (1000px). Don't you?

  • Telerik Admin admin's avatar

    Posted on Mar 9, 2007 (permalink)

    Hi Bertrand,

    Please excuse me if my previous reply was somehow misleading for you. Actually with the new rendering mechanism of radGrid 4.5.2 there should be no problem regardless whether you set percentage or pixel height value for the html table.
    In support of my statement, I have prepared a demo project holding radGrid and MS GridView instances in table cells of an html table. The grids were stretched to fill the available space (see the enclosed screenshot and demo site). They are also auto-resized when the browser window dimensions are changed by the user.

    Let me know if I am leaving something out.

    Best regards,
    Stephen
    the telerik team
    Attached files

  • Dindin avatar

    Posted on Mar 9, 2007 (permalink)

    Hello Stephen,

    I tried your demo project, but the problem remains here.
    This is the way to reproduce it:

    - Comment or delete the second line of the table (and the gridview)
    <tr><td><asp:GridView ID="GridView1" runat="server" DataSourceID="AccessDataSource1" Height="100%" Width="100%"></asp:GridView></td></tr>

    - Run the project (the radgrid is ok).
    - Resize up your brower (still ok).
    - Now resize down and there it comes!
    See the problem
    I hope that's help you to reproduce

  • Telerik Admin admin's avatar

    Posted on Mar 12, 2007 (permalink)

    Hello Bertrand,

    I am not sure what is discrepancy you have encountered. In my local tests when resizing the browser height the grid behaved in the same way as MS GridView wrapped in a div with overflow: scroll and height/width set to 100%.

    Can you please verify that in the project enclosed to this reply (commenting/uncommenting the grid and MS GridView html code)? Any further details/screenshots with pointers outlining the differences can be of a great help in localizing the reason for the abnormality and provide a solution for it.

    Best regards,
    Stephen
    the telerik team
    Attached files

  • Dindin avatar

    Posted on Mar 13, 2007 (permalink)

    Hi,
    The problem still exists. I've made a little video with robohelp for you to see what I'm doing : the video (in flash).
    I hope that it can be some help for you.

    Bertrand

  • Telerik Admin admin's avatar

    Posted on Mar 13, 2007 (permalink)

    Hi Bertrand,

    Thank you for the movie - now I see your point more clearly.

    Indeed only the vertical grid scroll behaves a bit differently compared to MS GridView wrapped in div with scrolling. Unfortunately our web grid is more complex control than then standard GridView and synchronizing the vertical scroll with the browser scroll is not a trivial task. We will look into the possibility to extend the scrolling and auto-resizing for RadGrid in the way you requested for one of the future versions of the product.

    I hope this is not a show stopper for you - for the time being you may consider the alternative to wrap the grid in RadSplitter and resize it as in this integration example:

    http://www.telerik.com/demos/aspnet/Controls/Examples/Integration/GridAndSplitterResizing/DefaultVB.aspx?product=grid

    Best regards,
    Stephen
    the telerik team

  • Dindin avatar

    Posted on Mar 13, 2007 (permalink)

    Ok, I will see that, think you.
    Bertrand

  • Michael Casey avatar

    Posted on Mar 29, 2007 (permalink)

    This project does not work inI.E. 7.0. I'm getting the following javascript error:

    'window.RadGrid1.ClientSettings' is null or not an object

    Could you please confirm that this project can run in I.E. 7.0 ?
    Thanks.

  • Telerik Admin admin's avatar

    Posted on Mar 30, 2007 (permalink)

    Hello Michael,

    The enclosed application should work as expected regardless of the browser version (IE 6/7, FireFox 2.x, etc.).
    Please verify that you have enabled javascript from your browser options.

    Best regards,
    Vlad
    the telerik team

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

  • jerm avatar

    Posted on Apr 19, 2007 (permalink)

    in your example: Grid4xNET2VBU.zip if i remove the asp:gridview, why does the rad grid not resize to the full size of the screen.  instead it takes up a certain amount of the screen.  I have been having this issue and can't find a solution.

  • Telerik Admin admin's avatar

    Posted on Apr 20, 2007 (permalink)

    Hello jerm,

    I am not sure under which browser you have observed the described issue. The grid was stretch to fit the browser window in my local tests under IE 6/7, FireFox 2.x and Opera 9.x. For your convenience I am attaching several screenshots along with the html code of the page - let me know if I am missing something.

    Best regards,
    Stephen
    the telerik team

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

  • magoicochea avatar

    Posted on Sep 25, 2007 (permalink)

    Some questions:

    1) Do this also fixes the problem on ASP.NET 1.1?
    2) I have tried to follow the example, but after I populate the table it shrinks to the minimum height.
    3)I have also tried doing the same on the scrollHeight property, but I got the same results.
    4)Is the column resize clientsetting obligatory?

    I am using RadGrid 5.0

    Thanks,

    Miguel Angel

  • Telerik Admin admin's avatar

    Posted on Sep 28, 2007 (permalink)

    Hi Miguel,

    I have prepared two versions of the project - with RadGrid 5.x and RadGrid Prometheus (with scrolling and static headers enabled) - where the control occupies the entire available space in the browser page. I have tested the project under IE 6/7, FireFox 2.x, Mozilla 1.7.x, Opera 9.x and Safari for Windows. Let me know whether it produces the desired result on your machine.

    Onto your additional questions:
    1. The same approach should be applicable under ASP.NET 1.x using XHTML transitional doctype on the page
    2. and 3 are addressed with the implementation from the sample demo
    3. Setting ClientSettings -> Resizing ->AllowColumnResize to true is optional.
    Best regards,
    Stephen
    the Telerik team

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

  • JL avatar

    Posted on Nov 28, 2007 (permalink)

    I just applied the 5.0 grid example, which works fine without a skin - but once I apply the "Blue" theme (unmodified) as an example, multiple issues appear - primarily though, a huge gap between the header and the rows (1000+ pixels of blank space).  Any ideas?

  • Telerik Admin admin's avatar

    Posted on Nov 29, 2007 (permalink)

    Hi Jeff,

    Please find attached a modified version of the project previously sent to you by Stephen. The Grid uses the Blue skin and there is no gap. Please review the example and compare it with your version. If you still need help with the issue, please send us a simple working project (attached to a formal support ticket), so that we can take a look and give advice. Thank you in advance.

    Best,
    Dimo
    the Telerik team

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

  • mzn developer avatar

    Posted on Feb 26, 2008 (permalink)

    I tried the solutions supplied above and they work great as long as the grid is the only control on the page with no padding around it.  When another control is added (say a Tabstrip with the grid inside a multipage) then the bottom of the grid pushes off the page.  How can the dynamic resizing be accomplished while maintaining set padding around the grid so it looks decent on the page with other controls?

  • Telerik Admin admin's avatar

    Posted on Feb 27, 2008 (permalink)

    Hello mzn developer,

    With multiple controls you may consider separating the page into sections using our splitter control and change dynamically the height of the grid by changing its page size. Here are two online examples (with the Classic and Prometheus versions of RadSplitter and RadGrid) which illustrate the approach in reality:

    http://www.telerik.com/demos/aspnet/Controls/Examples/Integration/GridAndSplitterResizing/DefaultCS.aspx?product=grid
    http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/GridAndSplitterResizing/DefaultCS.aspx?product=splitter

    Best regards,
    Stephen
    the Telerik team

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

  • Octavian avatar

    Posted on Mar 14, 2008 (permalink)

    Hi,
    I am using the example provided by Stephen, 10/13/2006 6:03:21 AM, "Additionally, if you enable the paging feature of the grid, you will need to modify the code in the script block as follows:"...
    I have adjusted it for my page, it works fine except when paging on the grid with EnableAjax=True. When loading the page first time, Resize is called, the grid is resized OK. Same when resizing the browser window.
    When Paging in radgrid with     EnableAjax=True, Resize is not called when going to second page (or other page). One fix would be to set EnableAjax to false, which I don't like. I need some way of calling Resize function when paging in grid with EnableAjax=True.
    Thank you

  • Telerik Admin admin's avatar

    Posted on Mar 14, 2008 (permalink)

    Hello Octavian,

    Since this example is quite outdated, please use the demo from the RadGrid5xWithAutoResize archive (or the respective Prometheus version) to attain the resizing functionality you are after.

    Best regards,
    Stephen
    the Telerik team

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

Back to Top

Skip Navigation LinksHome / Community / Code Library / ASP.NET and ASP.NET AJAX > Grid > Setting 100% height and resize on container resize for grid with scrolling and static headers

Powered by Sitefinity ASP.NET CMS

Contact Us | Site Feedback | Terms of Use | Privacy Policy
Copyright © 2002-2010 Telerik. All rights reserved.