Resizing the grid to its container on browser resize

4 posts, 0 answers
  1. Polaris431
    Polaris431 avatar
    30 posts
    Member since:
    Jul 2007

    Posted 05 Aug 2009 Link to this post

    Amazing how many times this question has to get asked. With so many posts, you'd figure that after over a year of being on the market, Telerik would clearly show how to resize a grid to fill the height and width of its container. Please Telerik, stop putting together dumb examples showing us how its done by placing a grid inside of web page with virtually nothing else. Real applications are more complex and the HTML layout gets complicated and affects how the grid operates. I have just spent 3 hours reading postings here, the documentation and online demos yet I haven't found a single source of help on showing a consistent way of resolving this problem. Here is how my page is setup:

    On the page is a RadTabstrip. The first PageView is used to setup criteria that the user inputs. After pressing a Radtoolbar button located outside of the tabstrip, the second tab is shown. It is ajaxfied and contains a RadGrid. The grid is not visible until that RadToolbar button is pressed and the RadAjaxManager is used to update it. And no, I don't use a RadAjaxPanel. The grid does in fact gets shown. The grid at this point is suppose to resize automatically to the size of the pageview which it doesn't.

    Having read many posts, it seems that you are suppose to set the height and width of the grid's container to fixed pixel values and NOT to 100%. The problem I have here is that if I set the pageview (or whatever the parent container is) to any fixed value, the grid will end up being that height and width as well. Yes, that's what I want but how am I suppose to get the pageview to resize when the browser resizes? Any attempts I have made to read the height and width of the pageview returns either empty or 0.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Aug 2009 Link to this post

    Hello,

    (everything below applies to the case when RadGrid has scrolling enabled and its height is set in percent)

    There are a couple of examples, which show how to make RadGrid resize automatically together with the browser window. Indeed, they are simple, but demonstrate the general idea, which is missed by the majority of people, namely - you have to obey the CSS specifications with regard to percentage heights:
    http://www.w3.org/TR/CSS21/visudet.html#propdef-height

    Given that the above requirement is met, RadGrid readjusts its layout automatically if the browser window is resized. However, if the RadGrid's container is resized without the browser window (e.g. you resize a <div> with Javascript), then RadGrid does not readjusts its layout, unless you call the repaint() method to the RadGrid client object.

    The following demo exists to show how explicit heights are required by the RadGrid parent elements, when the control is 100% high (any percentage, actually):

    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

    In addition, one has to keep in mind that RadAjaxManager generates update panels, which are <div>s with no styles. They break the layout from the above code library example, that's why the following example shows how to add a 100% height to update panel <div>s at runtime:

    http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx


    You should be able to construct your web page to work as expected, base on the provided information. There is one exception though - if you update the RadGrid control with AJAX, while the RadGrid's containing PageView is not the active one, and if RenderSelectedPageOnly="false" for the RadMultiPage (by default), you will need to call repaint() to the RadGrid client object once its PageView becomes active. For this case you can use the RadTabStrip's OnClientTabSelected event handler.


    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Julian
    Julian avatar
    30 posts
    Member since:
    Sep 2010

    Posted 30 May 2014 in reply to Dimo Link to this post

    This is quite an old post is there a newer one you could point me to. If I set my grid to 100% all my rows are immediately compressed and I only see the grid's header and footer. I have hscrolling enabled buy not vscrolling.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Jun 2014 in reply to Julian Link to this post

    Hi Julian,

    Please set full height to all of the containers of the grid and add the following CSS:

    ASPX:
    <div style="height: 100%;">
        <telerik:RadGrid ID="RadGrid1" Height="100%">

    CSS:
    <style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div.RadGrid
        {
            border: 0 none;
        }
    </style>

    Thanks,
    Princy
Back to Top