This is a migrated thread and some comments may be shown as answers.

Resizing the grid to its container on browser resize

3 Answers 456 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Polaris431
Top achievements
Rank 1
Polaris431 asked on 05 Aug 2009, 05:03 PM
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.

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 06 Aug 2009, 12:57 PM
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.
0
Julian
Top achievements
Rank 1
answered on 30 May 2014, 04:16 PM
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.
0
Princy
Top achievements
Rank 2
answered on 02 Jun 2014, 06:44 AM
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
Tags
Grid
Asked by
Polaris431
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Julian
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or