Correctly Setting RadGrid Height When Using ASP.NET Master Page

3 posts, 0 answers
  1. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 07 Feb 2013 Link to this post

    When using the RadGrid in the following example the RadGrid height does not account for the height of content in the master page resulting in a vertical scroll bar being displayed. Do you have a recommended approach for correctly resizing the RadGrid when used with a master page?

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Deals.master.cs" Inherits="DueDiligenceGrid.Deals1" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
    </head>
    <body>
        <div style="height: 100px; background-color: Blue;"></div>
        <form id="form1" runat="server">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
              
            </asp:ContentPlaceHolder>
        </form>
    </body>
    </html>
      
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Deals.aspx.cs" Inherits="DueDiligenceGrid.Deals" MasterPageFile="~/Deals.Master" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Src="~/Control/DealGrid.ascx" TagName="TelerikDealGrid" TagPrefix="dd" %>
      
    <asp:Content ID="HeadContent" ContentPlaceHolderID="head" runat="server">
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <style type="text/css">
                html  
                {   
                    overflow:auto; 
                }
                        
                html, 
                body
                {   
                    height: 100%;   
                    margin: 0px;   
                    padding: 0px;  
                }   
            </style>
        </telerik:RadCodeBlock>
    </asp:Content>
      
    <asp:Content ID="MainContent" ContentPlaceholderID="ContentPlaceHolder1" runat="server">
        <telerik:RadSplitter 
            ID="TelerikDealGridSplitter" 
            runat="server"
            Orientation="Horizontal"
            Width="100%"
            Height="100%">
            <telerik:RadPane 
                ID="TelerikDealSearchPane" 
                runat="server"
                Height="100" 
                MaxHeight="100"
                ShowContentDuringLoad="false">
            </telerik:RadPane>
            <telerik:RadSplitBar 
                CollapseMode="Forward"
                ID="TelerikDealGridSplitBar" 
                runat="server" 
                EnableResize="True">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="TelerikDealGridPane" runat="server" ShowContentDuringLoad="false">
                <telerik:RadScriptManager ID="DealScriptManager" runat="server" />
                <dd:TelerikDealGrid ID="TelerikDealGrid" runat="server" />      
            </telerik:RadPane>
        </telerik:RadSplitter>
    </asp:Content>
      
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DealGrid.ascx.cs" Inherits="DueDiligenceGrid.Control.DealGrid" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <telerik:RadAjaxManager ID="TelerikDealGridAjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="TelerikDealGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="TelerikDealGrid" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
        <telerik:RadGrid 
            ID="TelerikDealGrid"
            runat="server" 
            OnSortCommand="TelerikDealGrid_SortCommand" 
            OnPageIndexChanged="TelerikDealGrid_PageIndexChanged"
            Width="100%"
            Height="100%" 
            OnPageSizeChanged="TelerikDealGrid_PageSizeChanged" 
            AllowSorting="True"
            PageSize="15" 
            AllowPaging="True" 
            AllowMultiRowSelection="True" 
            ShowGroupPanel="true"
            GridLines="None"
            Style="border: 0;">
            <MasterTableView Width="100%" Summary="Deal table" CommandItemDisplay="TopAndBottom">
                <CommandItemTemplate>
                    <div style="height: 30px; text-align: left; background-color:Red">
                      
                    </div>
                </CommandItemTemplate>
            </MasterTableView>
            <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
            </ClientSettings>
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        </telerik:RadGrid>
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 12 Feb 2013 Link to this post

    Hello David,

    Please try to set UpdatePanelsHeight property of the RadAjaxManager to 100% and verify if this makes any difference.

    Kind regards,
    Maria Ilieva
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 17 Feb 2013 Link to this post

    Thank you for your reply. Setting UpdatePanelHeight="100%" for the RadAjaxManager did not make any difference.
Back to Top