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

Thread is closed for posting
28 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 12 Oct 2006 Link to this post

    Requirements

    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    JavaScript
    PROJECT DESCRIPTION 

    RadGrid Resize 100 Percent Height

    The following JavScript is required to resize the Grid to fit its parent container or the window. You can also find a runnable sample project attached (RadGrid_Resize_100_Percent_Height.zip) which demonstrates this scenario.

    <script type="text/javascript">
        $(window).resize(function () {
            GridCreated($find('<%= RadGrid1.ClientID %>')); // resize the grid on Window resize
        });
        function GridCreated(sender, args) {
            var parentHeight = $(window).height(); // make grid fit the Window height
            //var parentHeight = sender.get_element().parentElement.offsetHeight; // make grid fit its parent container height
            var scrollArea = sender.GridDataDiv;
            var gridHeaderHeight = (sender.GridHeaderDiv) ? sender.GridHeaderDiv.offsetHeight : 0;
            var gridTopPagerHeight = (sender.TopPagerControl) ? sender.TopPagerControl.offsetHeight : 0;
            var gridDataHeight = sender.get_masterTableView().get_element().offsetHeight;
            var gridFooterHeight = (sender.GridFooterDiv) ? sender.GridFooterDiv.offsetHeight : 0;
            var gridPagerHeight = (sender.PagerControl) ? sender.PagerControl.offsetHeight : 0;
     
            // Do nothing if scrolling is not enabled
            if (!scrollArea) {
                return;
            }
            if (gridDataHeight < 350 || parentHeight > (gridDataHeight + gridHeaderHeight + gridPagerHeight + gridTopPagerHeight + gridFooterHeight)) {
                scrollArea.style.height = gridDataHeight + "px";
            } else {
                scrollArea.style.height = (parentHeight - gridHeaderHeight - gridPagerHeight - gridTopPagerHeight - gridFooterHeight - 2) + "px"
            }
        }
    </script>


    OUTDATED (no maitenance)

    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.
  2. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 13 Oct 2006 Link to this post

    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
  3. 0E9963FB-2151-49B5-B3C2-AEE0C6621136
    0E9963FB-2151-49B5-B3C2-AEE0C6621136 avatar
    104 posts
    Member since:
    Aug 2004

    Posted 01 Mar 2007 Link to this post

    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
  4. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 02 Mar 2007 Link to this post

    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
  5. 0E9963FB-2151-49B5-B3C2-AEE0C6621136
    0E9963FB-2151-49B5-B3C2-AEE0C6621136 avatar
    104 posts
    Member since:
    Aug 2004

    Posted 02 Mar 2007 Link to this post

    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

  6. 6AB3838B-B392-4EDE-97F0-B3F5916D8900
    6AB3838B-B392-4EDE-97F0-B3F5916D8900 avatar
    11100 posts
    Member since:
    Jan 2017

    Posted 02 Mar 2007 Link to this post

    Hi John,

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

    Best wishes,
    Vlad
    the telerik team
  7. 0E9963FB-2151-49B5-B3C2-AEE0C6621136
    0E9963FB-2151-49B5-B3C2-AEE0C6621136 avatar
    104 posts
    Member since:
    Aug 2004

    Posted 03 Mar 2007 Link to this post

    Hello,

    The grid is working as desired at this point.

    Thanks!
    John
  8. B6BA0BFF-0048-47C8-8274-7690D572D466
    B6BA0BFF-0048-47C8-8274-7690D572D466 avatar
    33 posts
    Member since:
    Feb 2007

    Posted 08 Mar 2007 Link to this post

    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
  9. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 08 Mar 2007 Link to this post

    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
  10. B6BA0BFF-0048-47C8-8274-7690D572D466
    B6BA0BFF-0048-47C8-8274-7690D572D466 avatar
    33 posts
    Member since:
    Feb 2007

    Posted 08 Mar 2007 Link to this post

    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?
  11. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 09 Mar 2007 Link to this post

    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
  12. B6BA0BFF-0048-47C8-8274-7690D572D466
    B6BA0BFF-0048-47C8-8274-7690D572D466 avatar
    33 posts
    Member since:
    Feb 2007

    Posted 09 Mar 2007 Link to this post

    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

  13. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 12 Mar 2007 Link to this post

    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
  14. B6BA0BFF-0048-47C8-8274-7690D572D466
    B6BA0BFF-0048-47C8-8274-7690D572D466 avatar
    33 posts
    Member since:
    Feb 2007

    Posted 13 Mar 2007 Link to this post

    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
  15. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 13 Mar 2007 Link to this post

    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
  16. B6BA0BFF-0048-47C8-8274-7690D572D466
    B6BA0BFF-0048-47C8-8274-7690D572D466 avatar
    33 posts
    Member since:
    Feb 2007

    Posted 13 Mar 2007 Link to this post

    Ok, I will see that, think you.
    Bertrand
  17. A687520C-0820-4CF0-B240-2E7B3B0640EC
    A687520C-0820-4CF0-B240-2E7B3B0640EC avatar
    28 posts
    Member since:
    Nov 2005

    Posted 29 Mar 2007 Link to this post

    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.
  18. 6AB3838B-B392-4EDE-97F0-B3F5916D8900
    6AB3838B-B392-4EDE-97F0-B3F5916D8900 avatar
    11100 posts
    Member since:
    Jan 2017

    Posted 30 Mar 2007 Link to this post

    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
  19. 4A48FB82-E54A-436F-B1C2-CFC15706F53E
    4A48FB82-E54A-436F-B1C2-CFC15706F53E avatar
    22 posts
    Member since:
    Oct 2006

    Posted 19 Apr 2007 Link to this post

    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.
  20. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 20 Apr 2007 Link to this post

    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
  21. CAA7B5DC-3406-4E12-9AE1-FAD6504FAC80
    CAA7B5DC-3406-4E12-9AE1-FAD6504FAC80 avatar
    22 posts
    Member since:
    Jan 2007

    Posted 25 Sep 2007 Link to this post

    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
  22. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 28 Sep 2007 Link to this post

    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
  23. 161EE75F-826C-47E0-8DE7-CC369C45721C
    161EE75F-826C-47E0-8DE7-CC369C45721C avatar
    8 posts
    Member since:
    Oct 2007

    Posted 28 Nov 2007 Link to this post

    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?
  24. 2D95F235-B3CE-414A-BD6E-7B2E8B7CF5CD
    2D95F235-B3CE-414A-BD6E-7B2E8B7CF5CD avatar
    8486 posts
    Member since:
    Apr 2023

    Posted 29 Nov 2007 Link to this post

    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
  25. 875D440A-5470-4BEE-90E4-FA60B203A9F6
    875D440A-5470-4BEE-90E4-FA60B203A9F6 avatar
    68 posts
    Member since:
    Jul 2005

    Posted 26 Feb 2008 Link to this post

    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?
  26. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 27 Feb 2008 Link to this post

    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
  27. ECF9DDD0-87FA-42EB-A7F1-244065CA4AC6
    ECF9DDD0-87FA-42EB-A7F1-244065CA4AC6 avatar
    1 posts
    Member since:
    Mar 2008

    Posted 14 Mar 2008 Link to this post

    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
  28. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 14 Mar 2008 Link to this post

    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

This Code Library is part of the product documentation and subject to the respective product license agreement.