Setting Radsplitter Height to its content

4 posts, 0 answers
  1. neo
    neo avatar
    2 posts
    Member since:
    May 2009

    Posted 29 Nov 2009 Link to this post

    Hello guys,

    I want to make radsplitter get height from its content dynamically, not static height. I mean I don't want splitter to have scroll bars, instead using explorer natural scroll bars. Splitter has 2 panes; the left pane is a radpane menu which is higher than entire window and the right pane is a dynamic content with arbitrary heights. In this case I get 2 annoying scroll bars or my contents are hidden. I don't want either case. I want simply one scroll bar on explorer and to achieve this splitter have to get height from content dynamically.

    This was OK inTelerik 2008 but in Telerik 2009 I have this problem.

    This is a sample code showing the problem:

    <%@ Page Language="VB" AutoEventWireup="true" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head id="Head1" runat="server">  
        <title></title>  
    </head> 
    <body> 
        <form id="form2" runat="server">  
        <asp:ScriptManager ID="ScriptManager" runat="server" /> 
        <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" Width="100%" 
            Height="930">  
            <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">  
                <div style="background-color: GrayText; height: 920px;">  
                    This is a static menu. Height is 920px.  
                </div> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" /> 
            <telerik:RadPane ID="ContentPane" runat="server">  
                <div style="background-color: Gray; height: 5000px;">  
                    This is a dynamic content. Current height is 5000px.  
                    <br /> 
                    I want splitter height be 5000px dynamically.  
                </div> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 
     

    I would thanks in advance for any help.

    Regards.

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Dec 2009 Link to this post

    Hi neo,

    For the time being, there is no simple way (e.g. set a property) to achieve the desired functionality. The RadSplitter control offers a rich clientside API, however, that you can use to achieve the desired result.

    I would recommend that you use the OnClientLoaded handler of the RadSplitter object to calculate the Height of the content of the RadPane and set that value as Height of the RadPane. You can find additional information along with a sample demo in the following location:

    http://www.telerik.com/support/kb/aspnet-ajax/splitter/initially-resize-the-radsplitter-according-to-its-content.aspx

    Let us know if you need additional help with that.



    Kind regards,
    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. neo
    neo avatar
    2 posts
    Member since:
    May 2009

    Posted 05 Dec 2009 Link to this post

    Hi Svetlina,

    Thanks for your reply. It works great. But now I have another problem which as follows:
    In some forms the content height in Radpane2 or ContentPane will be changed in javascript and no ClientLoaded event will be raised. One example of this is when I use Ajax Controls Toolkit CollapsiblePanelExtender :

        <asp:Panel ID="Help" runat="server" Width="100%">  
            &nbsp; &nbsp;  
            <asp:HyperLink ID="hypHelp" runat="server">  
                <asp:Image ID="imgHelp" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/Mod_Core/UserControls/Monitor/MonitorList/Help.gif" />&nbsp;  
                <asp:Label ID="lblHelp" runat="server" Text="<% $Resources:lblHelp %>"></asp:Label> 
            </asp:HyperLink> 
            <cc1:CollapsiblePanelExtender ID="ClpxMonitorHelp" runat="server" CollapseControlID="hypHelp" 
                Collapsed="true" CollapsedSize="0" ExpandControlID="hypHelp" ExpandedSize="120" 
                TargetControlID="pnlHelp">  
            </cc1:CollapsiblePanelExtender> 
            <asp:Panel ID="pnlHelp" runat="server" BackColor="whiteSmoke" Width="99%">  
                <br /> 
                <asp:Literal ID="ltl2" runat="server" Text="<% $Resources:ltl2 %>"></asp:Literal><br /> 
                <br /> 
                <asp:Literal ID="ltl3" runat="server" Text="<% $Resources:ltl3 %>"></asp:Literal><br /> 
                <asp:Literal ID="ltl4" runat="server" Text="<% $Resources:ltl4 %>"></asp:Literal> 
                <br /> 
                <br /> 
                &nbsp; &nbsp;  
                <asp:Literal ID="ltl5" runat="server" Text="<% $Resources:ltl5 %>"></asp:Literal><br /> 
                &nbsp; &nbsp;  
                <asp:Literal ID="ltl6" runat="server" Text="<% $Resources:ltl6 %>"></asp:Literal>&nbsp;  
                &nbsp; &nbsp; &nbsp;  
                <br /> 
            </asp:Panel> 
            <br /> 
            <br /> 
        </asp:Panel> 
     

    As you can see here I use this to show some help. CollapsiblePanelExtender shows/hides a panel in client side by clicking on a link and therefore changing the height of radpane content.

    Best Regards,
    neo
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 09 Dec 2009 Link to this post

    Hi neo,

     In this case you should hook up to the particular event. For example, if you replace the collapsible panel e.g with a RadToolTip, you can use its OnClientShow event. This being said, it is up to you and your custom logic what event to capture (e.g onmouseover with some timeout and check for visibility might work in your case).


    Kind regards,
    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.
Back to Top