Setting RadGrid's height in percentage

Thread is closed for posting
1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 14 Apr 2014 Link to this post

    Requirements

    Telerik Product and Version


    Supported Browsers and Platforms

    browser support all browsers supported by RadControls

    Components/Widgets used (JS frameworks, etc.)

    jQuery

    PROJECT DESCRIPTION

    This code library consist of 4 pages, each of which demonstrates a different scenario.

    1. RadGrid in RadSplitter

    In order to set an element’s height in percentage unit (in this case the RadGrid) it is required all ascendant elements to have an explicit height in percent until an element with height in pixels is met. In this case only the RadPane needs to have an explicit height. If you want the whole splitter to occupy 100% of the page, then set the splitter’s height in percentage and follow the basic rule explained above. Additionally, make sure you have included this CSS rule in the page styles:

    html,
    body,
    form{
       height: 100%;
       margin: 0px;
       padding: 0px;
    }

    2. RadGrid in RadTabStrip

    The case is very similar to that with RadSplitter, this time however the RadPageView that holds the grid needs to have an explicit height too.

    3. RadGrid in RadAjaxPanel

    When RadGrid is wrapped in RadAjaxPanel there are two wrapper divs that are rendered around the grid. So, in order to set grid’s height in percentage these two divs should also have heights in percentage. To do that set the Height property of RadAjaxPanel, like shown in the demo and include the following CSS rules in the page styles:

    html,
    body,
    form
    {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
     
    div.RadGrid {
        border: 0 none;
    }

    4. RadGrid and RadAjaxManager

    The situation is analogical for RadAjaxManager. This time however the UpdatePanelHeight property needs to be set in the ajax settings.

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelHeight="100%" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    5. RadGrid on a page with header and footer.

    It is very common scenario to have a header and footer on the page and you require the grid to occupy the space between them. Also the grid should resize correctly when the browser window is vertically expanded or shrank. To achieve this, the only thing that needs to be done is to subtract the header and footer heights (including padding, margin and border) from window’s height and pass the result as grid height. The grid client object should be repainted on window resize event so it can recalculate its metrics properly when resized vertically.
Back to Top