RadGrid for ASP.NET

Changing grid ScrollHeight at runtime to fill its container height Send comments on this topic.
Scrolling > How-to > Changing grid ScrollHeight at runtime to fill its container height

Glossary Item Box

You may want to modify the default grid scroll height (when you enable scrolling for the control) in order to match its container height when rendered in the browser. This is easily achievable by wiring the GridCreated event and obtaining reference to the scrollable div rendered on the page when AllowScroll is set to true. Then you just have to alter the style -> height attribute of this div to equalize it with the height of the container which wraps the grid instance.

In the example below this operation is performed for html table grid container:


ASPX/ASCX Copy Code
<script type="text/javascript">
        
function GridCreated()
       {
         var scrollArea = document.getElementById(this.ClientID + "_GridData");
         var table = document.getElementById("gridTable");

         scrollArea.style.height = table.clientHeight + "px";

       }
</script>
<
table style="height: 500px; border: solid 1px blue;" id="gridTable">
    
<tr>
        
<td>
            
<rad:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" DataSourceID="AccessDataSource1">
                 
<ClientSettings>
                      
<Scrolling AllowScroll="true" ScrollHeight="300px" UseStaticHeaders="true" />
                      
<ClientEvents OnGridCreated="GridCreated" />
                  
</ClientSettings>
              
</rad:RadGrid>
        
</td>
   
</tr>
</table>
<asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb"
   
SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
   
runat="server"></asp:AccessDataSource>