Setting RadGrid's height in percentage

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 14 Apr 2014 Link to this post


    Telerik Product and Version

    Supported Browsers and Platforms

    browser support all browsers supported by RadControls

    Components/Widgets used (JS frameworks, etc.)



    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:

       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:

        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">
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelHeight="100%" />

    5. RadGrid on a page with header and footer.

    Note: In some scenarios, for example when RadGrid has a container and its skin is set to Material, the grid might not be able to fit 100% of the available space. This discrepancy probably arises due to some border widths and you can try to add the following CSS rule to resolve it:
    .RadGrid {
        box-sizing: border-box;

    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

This Code Library is part of the product documentation and subject to the respective product license agreement.