RadGrid occupying 100% height width Paging and CommandItem enabled in UI for ASP.NET AJAX Grid

Piotr Szmyd

22 posts

Member since:
Jul 2007

Posted 07 Mar 2008 Link to this post

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).

Piotr Szmyd

22 posts

Member since:
Jul 2007

Posted 07 Mar 2008 Link to this post

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

Sebastian

Admin

9934 posts

Posted 10 Mar 2008 Link to this post

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

Piotr Szmyd

22 posts

Member since:
Jul 2007

Posted 10 Mar 2008 Link to this post

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

Piotr Szmyd

22 posts

Member since:
Jul 2007

Posted 11 Mar 2008 Link to this post

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

Piotr Szmyd

22 posts

Member since:
Jul 2007

Posted 14 Mar 2008 Link to this post

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

Sebastian

Admin

9934 posts

Posted 14 Mar 2008 Link to this post

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

Piotr Szmyd

22 posts

Member since:
Jul 2007

Posted 14 Mar 2008 Link to this post

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

Sebastian

Admin

9934 posts

Posted 14 Mar 2008 Link to this post

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

Piotr Szmyd

22 posts

Member since:
Jul 2007

Posted 14 Mar 2008 Link to this post

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

Piotr Szmyd

22 posts

Member since:
Jul 2007

Posted 14 Mar 2008 Link to this post

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

Tony Steele

16 posts

Member since:
Aug 2003

Posted 14 Mar 2008 Link to this post

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.

Tony Steele

16 posts

Member since:
Aug 2003

Posted 17 Mar 2008 Link to this post

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

Sebastian

Admin

9934 posts

Posted 18 Mar 2008 Link to this post

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

kiwo

17 posts

Member since:
Apr 2007

Posted 20 Aug 2008 Link to this post

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

Dimo

Admin

8457 posts

Posted 22 Aug 2008 Link to this post

Hi all,

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.

kiwo

17 posts

Member since:
Apr 2007

Posted 22 Aug 2008 Link to this post

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

Dimo

Admin

8457 posts

Posted 25 Aug 2008 Link to this post

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.

kiwo

17 posts

Member since:
Apr 2007

Posted 25 Aug 2008 Link to this post

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

Dimo

Admin

8457 posts

Posted 25 Aug 2008 Link to this post

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.

Kasim

20 posts

Member since:
Feb 2016

Posted 28 Oct in reply to Dimo Link to this post

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?

Dimo

Admin

8457 posts

Posted 28 Oct Link to this post

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.