Radgrid fill container height
I have some nested divs, one of which contains a Radgrid control which needs to fill its container.
Tried 100% height/width. Didn't work.
Tried absolute positioning. Didn't work.
Followed advice from Telerik here. Nope.
Followed this post. Uh-uh.
I tried contacting Telerik support. Their solution had me changing the size of the divs above the grid, but this isn't the problem (those divs are already sized properly).
All other solutions I've found are a variation of one of the above, but none of these is getting me there. I broke the problem down into a sample master page (the client page is empty). Here's the code and css:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="GridTest.master.cs" Inherits="GridTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Grid Test</title>
<link href="main-styles.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function gridCreated(sender, eventArgs) {
var scrollArea = sender.GridDataDiv;
var parentHeight = $('#inner-content').height();
var gridHeader = sender.GridHeaderDiv;
scrollArea.style.height = parentHeight - gridHeader.clientHeight + "px";
}
</script>
</telerik:RadCodeBlock>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="banner">
</div>
<div id="wrapper1">
<div id="wrapper2">
<div id="sidepanel">
Action</div>
<div id="content-box">
<div id="panel-header">
Panel header</div>
<div id="inner-content">
<telerik:RadGrid ID="TestGrid" runat="server">
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="true" />
<ClientEvents OnGridCreated="gridCreated" />
</ClientSettings>
</telerik:RadGrid>
</div>
<!-- inner-content -->
</div>
<!-- content-box -->
</div>
<!-- wrapper2 -->
</div>
<!-- wrapper1 -->
</form>
</body>
</html>
And the css:
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input
{ margin:0; padding:0 }
h1, h2, h3, h4, h5, h6, pre, code { font-size:100%; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
font-family: Verdana, Arial, sans-serif;
line-height: 140%;
color: #fff;
background: #301849;
}
p {
font-size: 1em;
padding-bottom: 1em;
padding-top: 0.8em;
}
#banner
{
background-color: Blue;
position: fixed;
width: 100%;
height: 100px;
}
#wrapper1 {
position: relative;
top: 110px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrapper2 {
position: absolute;
height: 100%;
top: 0px;
right: 0px;
bottom: 110px;
left: 0px;
overflow: hidden;
background-color: Black;
}
#sidepanel
{
background-color: Orange;
position: absolute;
width: 300px;
height: 100%;
top: 0px;
left: 0px;
overflow: auto;
}
#content-box {
position: absolute;
height: 100%;
width: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 310px;
background-color: Gray;
}
#panel-header
{
position: absolute;
top: 0px;
right: 0px;
left: 0px;
height: 50px;
background-color: Green;
}
#inner-content
{
position: absolute;
background-color: Olive;
top: 50px;
right: 0px;
bottom: 0px;
left: 0px;
}
#TestGrid
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
Answer
I've had this problem as well. The rad grid was always rendered with 300pxs - in an inline style, not even a css class. The solution I came up with is easier than anything suggested by telerik or found on the web. Just add this to the style tag of your page and you're done (might have to change from the class to the actual id of the grid but you get the gist):
div.rgDataDiv
{
height:auto!important;
}
TaDa!