[Solved] 100% Height Grid

[Delicious!]

I realize this question has been asked numerous times before and I've done my best to go through each forum post that asked a similar question, I've done various google searches, and I've even given my best shot to achieve my desired result.  Unfortunately, I haven't been successful in achieving my desired result. 

What I'm trying to do is set the height of the grid to be 100% of the remaining space of its parent container.  Here's a screenshot of what my page looks like:

http://img56.imageshack.us/img56/5597/data.jpg

As you can see, there is a few pixels below the grid that is not being utilized.  I'm aware that 100% height is relative to its parent container and I've setup the CSS to accommodate that requirement:

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

html { border: solid 1px red; }
body { border: solid 1px blue; }
form { border: solid 2px orange; }

#contentts
{
    width: 800px;
    height: 100%;
}

For simplicity, I've replaced the various server controls in my screen shot w/ an empty div that consumes about the same amount of height.  Here's what the markup looks like:

<div id="contents">

<div style="height: 100px; border: solid 1px black;">

Filter Controls go here

</div>

<rad:RadGrid ID="itemizedChargeTypeGrid" runat="server" DataSourceID="itemizedChargeTypeODS"

Height="500px" PagerStyle-AlwaysVisible="true" AutoGenerateColumns="false"

AllowPaging="true" AllowSorting="true" PageSize="50">

<ClientSettings Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true" />

<MasterTableView DataKeyNames="ItemizedChargeTypeID, FacilityID, LoadBatchID">

<Columns>

<rad:GridBoundColumn DataField="RV" Visible="false" ReadOnly="true"

ForceExtractValue="Always" />

<rad:GridEditCommandColumn UniqueName="Edit" ItemStyle-HorizontalAlign="Center"

HeaderStyle-Width="50px" />

<rad:GridBoundColumn DataField="ChargeCode" UniqueName="ChargeCode"

HeaderText="Charge Code" ReadOnly="true" ForceExtractValue="Always"

HeaderStyle-HorizontalAlign="Center" />

<rad:GridBoundColumn DataField="Description" UniqueName="Description"

HeaderText="Description" ReadOnly="true" ForceExtractValue="Always"

HeaderStyle-HorizontalAlign="Center" />

<rad:GridBoundColumn DataField="RevenueCode" UniqueName="RevenueCode"

HeaderText="Revenue Code" ForceExtractValue="Always"

HeaderStyle-HorizontalAlign="Center" />

<rad:GridCheckBoxColumn DataField="Inferred" UniqueName="Inferred"

HeaderText="Inferred" ReadOnly="true" ForceExtractValue="Always"

ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />

<rad:GridCheckBoxColumn DataField="Active" UniqueName="Active" ReadOnly="true"

HeaderText="Active" ItemStyle-HorizontalAlign="Center"

HeaderStyle-HorizontalAlign="Center" />

</Columns>

</MasterTableView>

</rad:RadGrid>

</div> <rad:RadAjaxManager runat="server">     <AjaxSettings>         <rad:AjaxSetting AjaxControlID="itemizedChargeTypeGrid">             <UpdatedControls>                 <rad:AjaxUpdatedControl ControlID="itemizedChargeTypeGrid"                     LoadingPanelID="loadingPnl" />             </UpdatedControls>         </rad:AjaxSetting>     </AjaxSettings> </rad:RadAjaxManager>   <rad:RadAjaxLoadingPanel ID="loadingPnl" runat="server" BackColor="White"         MinDisplayTime="1000" Transparency="50" CssClass="loading" />

When the HTML above is rendered, the grid itself is wrapped in a div w/ an ID similar to <gridID>GridPanel or something similar.  Upon inspection, this is due to my utilization of the RadAjaxManager (at least that's what I've concluded). 

The RadAjaxManager itself doesn't expose any css related properties where I can specify the div that it renders to have a height of 100%.  W/ a little jQuery, I tried something like:

$("#itemizedChargeTypeGrid").parent().css("height", "100%")

which stretched the parent container of the grid to be 100%; however, the data w/ in the grid itself still remained a fixed height.  Upon reviewing the markup emitted by the RadGrid, I noticed the data was rendered in a div w/ an id similar to <gridID>_GridData.  And so I thought, why not set the height of the class of that element to be 100%. 

After doing so, the grid stretched; however, it appeared scrollbar functionality was lost.  Forgive me for a long winded explanation, but ultimately my question is:

How can I get the grid to dynamically stretch vertically to fit the remainder of its parent container while retaining the ability to have records not immediately visible to be scrolled into view? 

[Dimo]

Hi Ohrange,

In scenarios in which you want to size some control to take up the remaining space of its parent container, you need to use Javascript to calculate how much this space is and set it as a pixel height to the control. Using 100% is not suitable. You don't need to set anything to the update panel in this case. After setting a pixel height to the RadGrid <div> wrapper, you need to repaint the control.

JS

var grid = $find("GridClientIDHere");
grid.get_element().style.height = .... + "px";
grid.repaint();


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.

[Jason Maronge]

Can someone post different ways for people to "calculate how much this space is".  I am having a hard time getting this work size right.  I basically have a 2 row layout with a Header that is 90px in height and the rest of the page is set to 100% height.  My brain seems to be stuck on stupid right  now and can not seem to get it to work.

var grid = $find("GridClientIDHere");
grid.get_element().style.height = .... + "px";
grid.repaint();

the .... is what I need to know how to calculate.

Thanks,

Jason

[Dimo]

Hi Jason,

The common way to find out the height of an HTML element is to use the clientHeight and offsetHeight Javascript properties (you can google them for more information and examples).

The only important thing to point out with regard to RadControls is that the above two properties work with DOM elements (HTML elements), not client control instances. So if you have a RadGrid client control instance and want to find out the RadGrid height, you should first obtain a reference to the control's DOM element. Here are some examples to illustrate what I mean:

[Javascript]

var grid_control_instance = $find("....radgrid...client...id...here....");

var grid_dom_element = $get("....radgrid...client...id...here....");
// or
var grid_dom_element = $find("....radgrid...client...id...here....").get_element();


By the way, $get(...) is the same as document.getElementById(...). You can use these two for regular HTML elements (divs, tables), simple controls such as asp:Panels, asp:Tables, etc.


Here is a new code library example, which demonstrates different ways to set height to RadGrid on the client:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-set-radgrid-height-client-side-with-javascript.aspx


Best wishes,
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.