|
| 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.
|
|
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
|
|
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
|
|
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
|
|
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
|
|
Hi John,
Please visit this form thread and let us know what you think.
Best wishes,
Vlad
the telerik team
|
|
Hello,
The grid is working as desired at this point.
Thanks!
John
|
|
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
|
|
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
|
|
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?
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
Ok, I will see that, think you.
Bertrand
|
|
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.
|
|
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
|
|
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.
|
|
Hel |