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:
4. RadGrid and RadAjaxManager
The situation is analogical for
RadAjaxManager. This time however the
UpdatePanelHeight property needs to be set in the ajax settings.
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:
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.