Piotr Szmyd
Top achievements
Rank 1
Rank 1
Piotr Szmyd
asked on 07 Mar 2008, 04:24 PM
Hi,
Recently I've ran into common "100% RadGrid height issue".
After reading many posts about this problem I tried to apply your solutions in my project, but no luck.
All solutions to problem with making RadGrid occupy 100% container height (I use RadSplitter Prometheus) with AllowScroll="true" and UseStaticHeaders="true" don't take into account usage of CommandItem...
With CommandItem turned off, grid occupies 100% height of a container - it's ok.
But width CommandItem turned on the bottom part of a grid gets clipped (approx. the height of a CommandItem). It's happening in all sample projects I've seen attached to other posts in this topic...
My situation is as follows:
1. I use RadGrid inside RadSplitter pane (both Prometheus). RadSplitter is set to occupy 100% of the browser window height and width (so it resizes with browser window).
2. RadGrid has AllowScroll = true, UseStaticHeaders = true, Paging turned on and CommandItem showing on top of the grid
3. I want the grid to occupy 100% of the pane it's in and resize with browser window (so that Pager is always on the bottom of the pane and scrolling content stretches accordingly). It's quite easy to achieve width CommandItem turned off, but as I said before, when turned on - the bottom part (Pager or the least row when content fit on one page) of the grid gets clipped...
How can I acheive this?
It's currently a showstopper for my project... The usage of CommandItem/Paging/Scrolling is crucial so I cannot turn off any of them.
Regards,
Piotr
PS. I tried to set HeightOffset for RadSplitter, but it seems that it doesnt help at all (no difference, neither with empty value nor with any other).
Recently I've ran into common "100% RadGrid height issue".
After reading many posts about this problem I tried to apply your solutions in my project, but no luck.
All solutions to problem with making RadGrid occupy 100% container height (I use RadSplitter Prometheus) with AllowScroll="true" and UseStaticHeaders="true" don't take into account usage of CommandItem...
With CommandItem turned off, grid occupies 100% height of a container - it's ok.
But width CommandItem turned on the bottom part of a grid gets clipped (approx. the height of a CommandItem). It's happening in all sample projects I've seen attached to other posts in this topic...
My situation is as follows:
1. I use RadGrid inside RadSplitter pane (both Prometheus). RadSplitter is set to occupy 100% of the browser window height and width (so it resizes with browser window).
2. RadGrid has AllowScroll = true, UseStaticHeaders = true, Paging turned on and CommandItem showing on top of the grid
3. I want the grid to occupy 100% of the pane it's in and resize with browser window (so that Pager is always on the bottom of the pane and scrolling content stretches accordingly). It's quite easy to achieve width CommandItem turned off, but as I said before, when turned on - the bottom part (Pager or the least row when content fit on one page) of the grid gets clipped...
How can I acheive this?
It's currently a showstopper for my project... The usage of CommandItem/Paging/Scrolling is crucial so I cannot turn off any of them.
Regards,
Piotr
PS. I tried to set HeightOffset for RadSplitter, but it seems that it doesnt help at all (no difference, neither with empty value nor with any other).
21 Answers, 1 is accepted
0
Piotr Szmyd
Top achievements
Rank 1
Rank 1
answered on 07 Mar 2008, 04:45 PM
BTW.
It seems like CommandItem's height isn't counted within RadGrid Height. It's weird as it is an integral part of a grid...
It seems like CommandItem's height isn't counted within RadGrid Height. It's weird as it is an integral part of a grid...
0
Hello Piotr,
Indeed you are right - the command item height is not added automatically to the scroll height of the grid with scrolling and static headers enabled. The reason for that is the control is rendered with two separate divs (one for the headers and one of the data) which are synchronized to have the smooth scrolling behavior when dragging the scroll horizontally/vertically. To verify that merely review the rendered html of the browser page using FireBug or IE Developer Toolbar.
The data div wraps the data records in the table and since the command item is part of the header, its height dimension is not added to the overall scroll height value. The solution is either to reduce the Height property of the grid by setting it to 75% (for example) or dynamically change the height of the control as shown here:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/GridAndSplitterResizing/DefaultCS.aspx?product=splitter
I hope that one of the these options is feasible for you.
Best regards,
Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Indeed you are right - the command item height is not added automatically to the scroll height of the grid with scrolling and static headers enabled. The reason for that is the control is rendered with two separate divs (one for the headers and one of the data) which are synchronized to have the smooth scrolling behavior when dragging the scroll horizontally/vertically. To verify that merely review the rendered html of the browser page using FireBug or IE Developer Toolbar.
The data div wraps the data records in the table and since the command item is part of the header, its height dimension is not added to the overall scroll height value. The solution is either to reduce the Height property of the grid by setting it to 75% (for example) or dynamically change the height of the control as shown here:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/GridAndSplitterResizing/DefaultCS.aspx?product=splitter
I hope that one of the these options is feasible for you.
Best regards,
Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Piotr Szmyd
Top achievements
Rank 1
Rank 1
answered on 10 Mar 2008, 03:02 PM
Hi Stephen,
Thanks for response.
Unfortunately neither of the methods you mentioned is useful for me:(
1. http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/GridAndSplitterResizing/DefaultCS.aspx?product=splitter
This method (setting PageSize programmatically) is useless in my case - I have variable height rows (templated) and so have to use scrolling, as I mentioned before.
2. Setting height to eg. 75% makes layout look awful:
First - the pager is not always on the bottom of a container and the container filling depends on current window size - in higher resolutions there is a lot more whitespace below grid than in lower resolutions. This is why I want the grid to fill whole container - my application will be used on res's from 800x600 to 1920x1200.
Second - the CommandItem height problem still exists, but in other form. It looks like the border of a grid's content has proper height (75% of a container), but the grid itself is still higher (75% + CommandItem height). The effect is that bottom part of the border is not below last item (between pager and content as its should be), but it is placed ON the last item (because the grid is sligtly higher)... I think there's some rendering problem when using height in %'s and CommandItem
Third - it works only on IE (checked under IE7 - FF completely ignores the percentage and displays the grid about 200px high...)
You can simply repro this behavior (RadSplitter + RadGrid + CommandItem + Scrolling + Static Headers + Height 75% + eg. Vista skin). I can also send a screenshot to visualize the problem.
Isn't there any other way to make this settings work (on both IE7 and FF)? Maybe some custom CSS styling, wrapping the control in some way or something? I've searched all forums, docs and demos and haven't found any useful solution...
BTW - I understand the rendering method, but, logically thinking, shouldn't this be considered as a bug? RadGrid is thought to be one control (including CommandItem, Pager, Headers, Footer and content), so it's Height property should apply to the control as a whole, without forcing the end-user to know the underlying rendering system... In other words - it's just a bit misleading.
One more thing - is RadPane OnClientResized event fired when resizing browser window?
Regards,
Piotr
Thanks for response.
Unfortunately neither of the methods you mentioned is useful for me:(
1. http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/GridAndSplitterResizing/DefaultCS.aspx?product=splitter
This method (setting PageSize programmatically) is useless in my case - I have variable height rows (templated) and so have to use scrolling, as I mentioned before.
2. Setting height to eg. 75% makes layout look awful:
First - the pager is not always on the bottom of a container and the container filling depends on current window size - in higher resolutions there is a lot more whitespace below grid than in lower resolutions. This is why I want the grid to fill whole container - my application will be used on res's from 800x600 to 1920x1200.
Second - the CommandItem height problem still exists, but in other form. It looks like the border of a grid's content has proper height (75% of a container), but the grid itself is still higher (75% + CommandItem height). The effect is that bottom part of the border is not below last item (between pager and content as its should be), but it is placed ON the last item (because the grid is sligtly higher)... I think there's some rendering problem when using height in %'s and CommandItem
Third - it works only on IE (checked under IE7 - FF completely ignores the percentage and displays the grid about 200px high...)
You can simply repro this behavior (RadSplitter + RadGrid + CommandItem + Scrolling + Static Headers + Height 75% + eg. Vista skin). I can also send a screenshot to visualize the problem.
Isn't there any other way to make this settings work (on both IE7 and FF)? Maybe some custom CSS styling, wrapping the control in some way or something? I've searched all forums, docs and demos and haven't found any useful solution...
BTW - I understand the rendering method, but, logically thinking, shouldn't this be considered as a bug? RadGrid is thought to be one control (including CommandItem, Pager, Headers, Footer and content), so it's Height property should apply to the control as a whole, without forcing the end-user to know the underlying rendering system... In other words - it's just a bit misleading.
One more thing - is RadPane OnClientResized event fired when resizing browser window?
Regards,
Piotr
0
Piotr Szmyd
Top achievements
Rank 1
Rank 1
answered on 11 Mar 2008, 08:41 PM
After upgrading to the recent (3.1425) version (I had 3.1218 previously) I noticed, that this issue was addressed and successfully fixed, so setting RadGrid height to 100% works and looks now as expected!
Many thanks,
Piotr
Many thanks,
Piotr
0
Piotr Szmyd
Top achievements
Rank 1
Rank 1
answered on 14 Mar 2008, 11:57 AM
I said that it's working - yes, but only under IE7. In FF the grid renders very small - the scrollling, content pane is about one row high (maybe 20px) and the vertical scrollbar doesn't show.
How to make the grid expand to 100% height and resize with it's container in FF?
Regards,
Piotr
How to make the grid expand to 100% height and resize with it's container in FF?
Regards,
Piotr
0
Hi Piotr,
Have you tried to use FireBug to inspect the rendered html and the scroll height for the grid data div (with id similar to <RadGridInstance>_GridData) set under FireFox? This can identify the source of the issue with the grid height under Gecko-based browsers to eliminate it accordingly. Let us know what your findings are and if we can assist you further.
Best regards,
Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Have you tried to use FireBug to inspect the rendered html and the scroll height for the grid data div (with id similar to <RadGridInstance>_GridData) set under FireFox? This can identify the source of the issue with the grid height under Gecko-based browsers to eliminate it accordingly. Let us know what your findings are and if we can assist you further.
Best regards,
Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Piotr Szmyd
Top achievements
Rank 1
Rank 1
answered on 14 Mar 2008, 01:52 PM
I used Firebug and noticed, that scrolling content pane is rendered 10px high in FF.
This is what i found using Firebug:
<div id="ctl00_cphMainHolder_rgThreads_GridData" class="GridDataDiv_Vista" style="overflow: auto; width: 100%; height: 10px;">
Could this be fixed? I tried setting height to 100%, but then the grid renders too high and is clipped at the bottom.
Regards,
Piotr
This is what i found using Firebug:
<div id="ctl00_cphMainHolder_rgThreads_GridData" class="GridDataDiv_Vista" style="overflow: auto; width: 100%; height: 10px;">
Could this be fixed? I tried setting height to 100%, but then the grid renders too high and is clipped at the bottom.
Regards,
Piotr
0
Hi Piotr Szmyd,
Does removing the 100% height you set and increasing the height of the ctl00_cphMainHolder container (wrapping the grid instance) produces the desired result? It seems that under FireFox the height of the ctl00_cphMainHolder grid placeholder defaults to 10px which causes the visual glitch.
Best regards,
Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Does removing the 100% height you set and increasing the height of the ctl00_cphMainHolder container (wrapping the grid instance) produces the desired result? It seems that under FireFox the height of the ctl00_cphMainHolder grid placeholder defaults to 10px which causes the visual glitch.
Best regards,
Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Piotr Szmyd
Top achievements
Rank 1
Rank 1
answered on 14 Mar 2008, 02:16 PM
Hmmm, the cphMainHolder is placed in RadSplitter (on MasterPage), which is set to occupy 100% of the page. Neither of the parameters are set in pixels, so it's not so simple.
cphMainHolder is not directly wrapping the radGrid.
The hierarchy is as follows
1. RadSplitter on MasterPage
2. ContentPlaceHolder is placed in RadPane set without height (as a free pane to use all available space)
3. On the child page there is second RadSplitter set to use 100% of available space (so i have nested splitters - one on MasterPage and one on child page)
4. The RadSplitter on child page is divided vertically to 3 panes (first is fixed width - second and third widths are set in percents).
5. RadGrid (rgThreads) is placed in one of these panes. So there's no place where width is set in pixels - everything is set in percents.
The splitters resize correctly and fill the whole space, but the only issue is that RadGrid is not filling the entire pane height...
I tried looking in Firebug and nothing in hierarchy is set to 10px.
It looks like a bug in RadGrid for me? Correct me if I am wrong.
Regards,
Piotr
cphMainHolder is not directly wrapping the radGrid.
The hierarchy is as follows
1. RadSplitter on MasterPage
2. ContentPlaceHolder is placed in RadPane set without height (as a free pane to use all available space)
3. On the child page there is second RadSplitter set to use 100% of available space (so i have nested splitters - one on MasterPage and one on child page)
4. The RadSplitter on child page is divided vertically to 3 panes (first is fixed width - second and third widths are set in percents).
5. RadGrid (rgThreads) is placed in one of these panes. So there's no place where width is set in pixels - everything is set in percents.
The splitters resize correctly and fill the whole space, but the only issue is that RadGrid is not filling the entire pane height...
I tried looking in Firebug and nothing in hierarchy is set to 10px.
It looks like a bug in RadGrid for me? Correct me if I am wrong.
Regards,
Piotr
0
Piotr Szmyd
Top achievements
Rank 1
Rank 1
answered on 14 Mar 2008, 02:26 PM
cphMainHolder is only a ContentPlaceHolder on a MasterPage and it's not appearing directly as a html element on the page.
I checked the whole page with Firebug and there's none element wrapping rgThreads with it's height set to 10px.
I know, that there's a workaround with setting RadGrid height in pixels explicitely (by Javascript) when resizing/loading splitter, but I think it's not a proper cure...
Regards,
Piotr
I checked the whole page with Firebug and there's none element wrapping rgThreads with it's height set to 10px.
I know, that there's a workaround with setting RadGrid height in pixels explicitely (by Javascript) when resizing/loading splitter, but I think it's not a proper cure...
Regards,
Piotr
0
Tony Steele
Top achievements
Rank 1
Rank 1
answered on 14 Mar 2008, 06:55 PM
I have exactly the same problem.
Reading this thread, decided better check the app I was developing in Firefox, and guess what...
Content pane is rendered as 10px, the grid is in a dynamic control, loaded via Ajax and the first time it loads it briefly appears as the correct size before it shrinks down to 10px. subsequent reloads it appears already shrunk.
The containers are all set to resize if the browser window is resized, and when a manual resize occurs the grid expands to fill the container.
So the problem appears tobe when the grid is initially loading within a container.
Works fine in IE 7.
Reading this thread, decided better check the app I was developing in Firefox, and guess what...
Content pane is rendered as 10px, the grid is in a dynamic control, loaded via Ajax and the first time it loads it briefly appears as the correct size before it shrinks down to 10px. subsequent reloads it appears already shrunk.
The containers are all set to resize if the browser window is resized, and when a manual resize occurs the grid expands to fill the container.
So the problem appears tobe when the grid is initially loading within a container.
Works fine in IE 7.
0
Tony Steele
Top achievements
Rank 1
Rank 1
answered on 17 Mar 2008, 07:16 PM
Is this being fixed for the next release. Currently my application is unusable in Firefox.
Is there a workaround for the time being ?
Tony Steele
Is there a workaround for the time being ?
Tony Steele
0
Hello guys,
Can you please double-check that the container(s) which wraps the grid instance has explicitly set height in percentage/pixels? If the issue is still there, the best means to progress in our investigation is to prepare a stripped working version of your project and send it enclosed to a formal support ticket. We will test it locally and will get back to you with our findings.
Best regards,
Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Can you please double-check that the container(s) which wraps the grid instance has explicitly set height in percentage/pixels? If the issue is still there, the best means to progress in our investigation is to prepare a stripped working version of your project and send it enclosed to a formal support ticket. We will test it locally and will get back to you with our findings.
Best regards,
Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
kiwo
Top achievements
Rank 1
Rank 1
answered on 20 Aug 2008, 08:51 PM
Hi guys.
Was this problem resolved anyhow? I experience exactly the same in FireFox:
Content pane is rendered as 10px, the first time it loads it briefly appears as the correct size before it shrinks down to 10px.
---
TIA,
Mike
Was this problem resolved anyhow? I experience exactly the same in FireFox:
Content pane is rendered as 10px, the first time it loads it briefly appears as the correct size before it shrinks down to 10px.
---
TIA,
Mike
0
Hi all,
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
The problem with RadGrid not taking into account its Command Item's height when calculating its data <div> height has already been fixed, so make sure you are using RadControls for ASP.NET AJAX Q2 2008.
For any other issues, related to RadGrid not sizing correctly when its height is set to 100%, please refer to:
What needs to be done, so that RadGrid occupies 100% in height
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
How to set 100% Height to a RadAjaxManager Update Panel
http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx
Regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
kiwo
Top achievements
Rank 1
Rank 1
answered on 22 Aug 2008, 08:29 PM
Hi Dimo.
Thanks for your reply. Meanwhile, more or less, I managed to fix the grid layout. The only thing that prevents me from having a nice looking page is an element with ID "GPanel" (my grid ID is "G") which wraps the grid and doesn't have any height style assigned. If I define the style
#GPanel { height: 100%; }
everything starts working just fine. But it look a bit like a hack, maybe you can propose a more clear solution. Why isn't this GPanel set to 100% by component itself?
---
TIA,
Mike
Thanks for your reply. Meanwhile, more or less, I managed to fix the grid layout. The only thing that prevents me from having a nice looking page is an element with ID "GPanel" (my grid ID is "G") which wraps the grid and doesn't have any height style assigned. If I define the style
#GPanel { height: 100%; }
everything starts working just fine. But it look a bit like a hack, maybe you can propose a more clear solution. Why isn't this GPanel set to 100% by component itself?
---
TIA,
Mike
0
Hello Mike,
Please take a look at the second link in my previous post, it deals exactly with this type of divs.
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Please take a look at the second link in my previous post, it deals exactly with this type of divs.
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
kiwo
Top achievements
Rank 1
Rank 1
answered on 25 Aug 2008, 11:24 AM
Ok, thanks.
I'm just curious why this can't be done by the component itself. The statement "RadGrid supports 100% height" doesn't seem true to me when I have to add about 20 lines of code for each Grid instance in my application.
Can you post this into the feature/bugfix request list?
---
Mike
I'm just curious why this can't be done by the component itself. The statement "RadGrid supports 100% height" doesn't seem true to me when I have to add about 20 lines of code for each Grid instance in my application.
Can you post this into the feature/bugfix request list?
---
Mike
0
Hi Mike,
The idea is that a control should normally not add styles to web page elements, which are not part of the control.
However, if you use RadAjaxPanel to ajaxify RadGrid (or anything), you can set Height="100%" to the panel.
All the best,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
The idea is that a control should normally not add styles to web page elements, which are not part of the control.
However, if you use RadAjaxPanel to ajaxify RadGrid (or anything), you can set Height="100%" to the panel.
All the best,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Kasim
Top achievements
Rank 2
Rank 2
answered on 28 Oct 2019, 08:01 AM
Hi @Dimo,
Links in your post date 22nd Aug 2008 are not working. Is there any working solution to the Radgrid height issues when Ajaxified?
0
Hi Kasim,
Thanks for pointing this out. I have updated the links from my previous post and they will work now. Let us know if you have further questions.
Regards,
Dimo
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.