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" />
                 开发者_如何学Go           <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;
}

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!

Try this:

#inner-content
{
    position: relative;
    background-color: Olive;
    top: 50px;
    right: 0px;
    bottom: 0px;
    with: 100%;
    height: 100%;
    left: 0px;
}

And this:

<telerik:RadGrid Width="100%" Height="100%" ID="TestGrid" runat="server">

I just ran into this problem and figured I'd share my javascript/jquery solution. I see you're using static headers, and that for me was breaking the horizontal scrolling after I resized the grid. This solution does not break horizontal scrolling with UseStaticHeaders=true and properly sizes the grid to 250px less than the window's height.

var mainGrid;
function GridCreated(sender, args){
    mainGrid = sender.GridDataDiv;
    mainGrid.style.height = $(window).height() - 250;
}
$(window).resize(function() {
    if (mainGrid != null && $(window).height() > 250) {
        mainGrid.style.height = $(window).height() - 250;
    }
)};