How is Height of RadPane auto resized ?

6 posts, 0 answers
  1. Truong Giang Thai
    Truong Giang Thai avatar
    5 posts
    Member since:
    Oct 2009

    Posted 03 Nov 2009 Link to this post

    I have a RadGird in a RadPane, i want height of RadPane is auto resized follow content of RadGird. If i set height of RadPane, it's not auto resize . I don't know how to do. Any one help me? 
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Nov 2009 Link to this post

    Hi Truong,

    The RadSplitter does not have such built-in functionality. The main problem is that a lot of the features of the splitter and panes require that the RadPanes have size in pixels. For example, features that require this are MinWidth, MaxWidth, MinHeight, MaxHeight, Scrolling, etc. In case you simply need to display two cells in a row and do not intend to use any of the functionality that the RadSplitter offers, you can simply replace the splitter with a TABLE element. That way, you will reduce the client objects that are creates on your page with three (one for the RadSplitter and two for the two RadPanes).

    However, in case you prefer to use the RadSplitter control even in case you do not intend to use the functionality it offers, you can use the following approach:

    <head runat="server">  
        <title></title>  
        <style type="text/css">  
            .AutoHeight  
            {  
                height: auto !important;  
            }  
        </style>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager>  
        <telerik:RadSplitter ID="RadSplitter1" runat="server" CssClass="AutoHeight">  
            <telerik:RadPane ID="RadPane1" runat="server" CssClass="AutoHeight" BackColor="Aqua"  
                Scrolling="None">  
                TreeView pane  
            </telerik:RadPane>  
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />  
            <telerik:RadPane ID="RadPane2" runat="server" CssClass="AutoHeight" BackColor="Red"  
                Scrolling="None">  
                Grid pane  
            </telerik:RadPane>  
        </telerik:RadSplitter>  
        </form>  
    </body>



    Sincerely yours,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Truong Giang Thai
    Truong Giang Thai avatar
    5 posts
    Member since:
    Oct 2009

    Posted 07 Nov 2009 Link to this post

    Thanks for your helping, i really resolved it.
  5. Dylan
    Dylan avatar
    17 posts
    Member since:
    Apr 2013

    Posted 13 Jun 2013 Link to this post

    Hi,

    I try to set the main pane height to be auto so when user using different IE they can see the whole page. It look ok on IE7 if i set to 600px, but when i open the page in IE8, the page will overlap and part of the menu will be hidden from view.

    <

     

     

    form id="form1" runat="server">

     

     

     

    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

     

     

     

    </telerik:RadScriptManager>

     

     

     

    <telerik:RadSkinManager ID="RadSkinManager1" Runat="server">

     

     

     

    </telerik:RadSkinManager>

     

     

     

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"

     

     

     

    Skin="Default">

     

     

     

    </telerik:RadAjaxLoadingPanel>

     

     

     

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

     

     

     

    <ContentTemplate>

     

     

     

    <telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%"

     

     

     

    Orientation="Horizontal" style="margin-top: 0px" VisibleDuringInit="False"

     

     

     

    Width="100%">

     

     

     

    <telerik:RadPane ID="TopPane" Runat="server" Height="30px" Scrolling="None">

     

     

     

    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 30px;">

     

     

     

    <tr bgcolor="black">

     

     

     

    <td class="tdmain_top" align="right" width="100">

     

     

     

    <asp:Label ID="lblDate" Runat="server" CssClass="labeldate" Font-Bold="True"

     

     

     

    Font-Names="Arial" Font-Size="12px" ForeColor="Black" Height="16px"

     

     

     

    Width="245px"></asp:Label>

     

     

     

    </td>

     

     

     

    <td class="tdmain_top" valign="bottom" align="right">

     

     

     

    <asp:Label ID="lblTitle" Runat="server" CssClass="pms" Font-Bold="True"

     

     

     

    Height="16px" Width="500px">PROJECT MANAGEMENT SYSTEM

     

     

     

    </asp:Label>

     

     

     

    </td><td

     

     

     

    align="right" class="tdmain_top_right" valign="bottom">

     

     

     

    <asp:HyperLink ID="lblUser" runat="server" Font-Bold="True" Font-Names="Arial"

     

     

     

    Font-Size="9pt" Font-Underline="False" ForeColor="Black"

     

     

     

    NavigateUrl="~/UserInfo.aspx" Width="80px">[lblUser]</asp:HyperLink></td><td

     

     

     

    align="right" class="tdmain_top_right" valign="bottom">

     

     

     

    <asp:HyperLink ID="LogHyper" runat="server" Font-Bold="True" Font-Names="Arial"

     

     

     

    Font-Size="9pt" Font-Underline="False" ForeColor="Black"

     

     

     

    NavigateUrl="~/Login.aspx?Command=SignOut" Target="_parent" Width="80px">LOGOUT</asp:HyperLink></td></tr></table></telerik:RadPane>

     

     

     

    <telerik:RadPane ID="MainPane" Runat="server" Height="600px">

     

     

     

    <telerik:RadSplitter

     

     

     

    ID="RadSplitter2" Runat="server" Height="100%"

     

     

     

    VisibleDuringInit="False" Width="100%">

     

     

     

    <telerik:RadPane ID="MenuPane" Runat="server"

     

     

     

    Width="245px">

     

     

     

    <telerik:RadPanelBar ID="RadPanelBar1" Runat="server"

     

     

     

    AllowCollapseAllItems="True" ExpandMode="FullExpandedItem" Height="100%"

     

     

     

    OnClientItemClicking="OnClientItemClicking" Width="100%">

     

     

     

    </telerik:RadPanelBar>

     

     

     

    </telerik:RadPane><telerik:RadSplitBar ID="RadSplitBar1" Runat="server">

     

     

     

    </telerik:RadSplitBar>

     

     

     

    <telerik:RadPane ID="Main" Runat="server" ShowContentDuringLoad="False">

     

     

     

    <asp:Panel ID="Panel1" runat="server">

     

     

     

    </asp:Panel>

     

     

     

    </telerik:RadPane></telerik:RadSplitter></telerik:RadPane>

     

     

     

    </telerik:RadSplitter>

     

     

     

    </ContentTemplate>

     

     

     

    </asp:UpdatePanel>

     

     

     

    </form>

     

  6. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 18 Jun 2013 Link to this post

    Hi Dylan,

    I am no quite sure whether I understand the specific scenario correctly and what exactly do you mean with "I try to set the main pane height to be auto":
    • If you want the main pane to be resized depending on its content, you can see how that can be done in this help article: Initially Resize the RadSplitter according to its content
    • If you want to make the Splitter occupy 100% of the current viewport, you will need to configure also the size of all its parents, up to a parent with a fixed size. In your scenario you have to:
      - remove the height property of the MainPane
      - set the height of UpdatePanel1:
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" style="height:100%;">
      - add the following CSS styles to the html, body, form elements, which are also parents for the Splitter:
      html, body, form
      {
          height: 100%;
          padding: 0;
          margin: 0;
          overflow: hidden;
      }

    Hope this helps.

    Regards,
    Veselina Raykova
    Telerik
    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 the blog feed now.
  7. Ravindranath reddy
    Ravindranath reddy avatar
    4 posts
    Member since:
    Mar 2010

    Posted 14 Aug 2014 in reply to Svetlina Anati Link to this post

    Thanks man, it works perfect!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017