RadGrid occupying 100% height width Paging and CommandItem enabled

22 posts, 0 answers
  1. Piotr Szmyd
    Piotr Szmyd avatar
    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).
  2. Piotr Szmyd
    Piotr Szmyd avatar
    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...
  3. Sebastian
    Admin
    Sebastian avatar
    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
  4. Piotr Szmyd
    Piotr Szmyd avatar
    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
  5. Piotr Szmyd
    Piotr Szmyd avatar
    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
  6. Piotr Szmyd
    Piotr Szmyd avatar
    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
  7. Sebastian
    Admin
    Sebastian avatar
    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
  8. Piotr Szmyd
    Piotr Szmyd avatar
    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
  9. Sebastian
    Admin
    Sebastian avatar
    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
  10. Piotr Szmyd
    Piotr Szmyd avatar
    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
  11. Piotr Szmyd
    Piotr Szmyd avatar
    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
  12. Tony Steele
    Tony Steele avatar
    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.


  13. Tony Steele
    Tony Steele avatar
    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
  14. Sebastian
    Admin
    Sebastian avatar
    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
  15. kiwo
    kiwo avatar
    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
  16. Dimo
    Admin
    Dimo avatar
    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.
  17. kiwo
    kiwo avatar
    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
  18. Dimo
    Admin
    Dimo avatar
    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.
  19. kiwo
    kiwo avatar
    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
  20. Dimo
    Admin
    Dimo avatar
    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.
  21. Kasim
    Kasim avatar
    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?

  22. Dimo
    Admin
    Dimo avatar
    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.
Back to Top