RadPane dynamic high problem

7 posts, 0 answers
  1. Quan Nguyen
    Quan Nguyen avatar
    11 posts
    Member since:
    Apr 2006

    Posted 24 Jan 2008 Link to this post

    I have an outer splitter with 3 row, header, content and footer set to 100% height. In content area i i have an inner splitter with left and right pane, which also set to 100% height of content area. In the left pane I have a splitter that divides the left side in two radpanes, the top for subnavigation and the bottom för main navigation (just like MS Web Outlook).

    In the main navigation pane I have a RadPanelbar and the items load dynamic at runtime and depends aón user role. The problem is that I cannot set the height property of the main navigation pane equally to the RadPanelbar's height. The splitter in the left pane divides the two panes 50/50 (if I don't set the height property of those two), which is not good because all the empty space at the bottom which I don't want to have. I wanna set the height property of the main navigation pane equally to the RadPanelbar's height. How can I do that?
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 28 Jan 2008 Link to this post

    Hi Quan Nguyen,
    In order to achieve the desired effect, you will have to calculate the Height of the content of the RadPane as soon as you have created and added RadPanelbar to it and set that value as Height of the RadPane. You can use the ClientLoaded event of the RadSplitter control for example. Have a look at the following code fragment:
    <body>  
        <script type="text/javascript">  
        function OnClientLoadedHandler(splitter, args)     
        {          
            var pane = splitter.getPaneById("<%= RadPane2.ClientID %>");           
            var parentContent = pane.getContentElement();   
            var originalHeight = pane.get_height();  
            pane.set_height(1); //Otherwise the scrollHeight will not be correct in FF         
            var contentHeight = parentContent.scrollHeight;   
                  
            var topPane =  splitter.getPaneById("<%= RadPane1.ClientID %>");   
            topPane.set_height(topPane.get_height() + (originalHeight - contentHeight));     
              
            pane.set_height(contentHeight);            
        }    
     
        </script>  
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server" />  
            <telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoaded="OnClientLoadedHandler" Orientation="Horizontal">  
                <telerik:RadPane ID="RadPane1" runat="server"></telerik:RadPane>  
                <telerik:RadPane ID="RadPane2" runat="server">  
                    <div style="height:100px;width:100px;background-color:Red;"></div>  
                </telerik:RadPane>  
            </telerik:RadSplitter>  
        </form>      
    </body> 

    Best wishes,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Quan Nguyen
    Quan Nguyen avatar
    11 posts
    Member since:
    Apr 2006

    Posted 28 Jan 2008 Link to this post

    Hi,
    Thnx for a great answer, but there is still some problem with your solution. When you resize the browswer window or maximine it, the height property doesn't recaculate and therefore leaves empty space or cut of the content at the bottom (if set Scrollning="None").
  4. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 28 Jan 2008 Link to this post

    Hello Quan Nguyen,
    Indeed, you are correct. I would recommend that as soon as you set the desired height to the bottom pane, you lock that pane:
    <script type="text/javascript">  
    function OnClientLoadedHandler(splitter, args)     
    {          
        var pane = splitter.getPaneById("<%= RadPane2.ClientID %>");           
        var parentContent = pane.getContentElement();   
        var originalHeight = pane.get_height();  
        pane.set_height(1);          
        var contentHeight = parentContent.scrollHeight;   
              
        var topPane =  splitter.getPaneById("<%= RadPane1.ClientID %>");   
        topPane.set_height(topPane.get_height() + (originalHeight - contentHeight));     
          
        pane.set_height(contentHeight);       
        pane.set_locked(true);       
    }    
    </script> 

    In case you intent to change the height of that pane however, you can just execute that code, when the RadSplitter gets resized as well:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%"   
        OnClientLoaded="OnClientLoadedHandler" Orientation="Horizontal"   
        OnClientResized="OnClientLoadedHandler"> 

    Greetings,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Quan Nguyen
    Quan Nguyen avatar
    11 posts
    Member since:
    Apr 2006

    Posted 28 Jan 2008 Link to this post

    great, thnx!
  6. Leo
    Leo avatar
    1 posts
    Member since:
    Jun 2008

    Posted 25 Jun 2008 Link to this post

    I'm having a similar problem.

    I've got a splitter with a single pane.  I want to create a flyout menu which uses a RadPanelBar for the dynamic menu items and categories.  The problem I am facing is that if I don't pre-define the width of the single RadPane in the splitter at design time, the RadPanelBar does not cause the RadSplitter to slide out and present the menu - it's as if it slides UNDER the other content.

    I've submitted a trouble ticket and attached screenshots.  This is a MOSS solution designed to replace the left hand "quick navigation"

    screenshot 1 - shows how I'd like the UI to look (ignore styling) with a narrow button for the menu hover-over

    screenshot 2 - shows how I'd like the UI to look after the menu pops out.  Unfortunately I have to preset the width of the RadPane to get this effect.  By presetting the width of the RadPane, I lose the screen real-estate I'd prefer to use for content (and have the menu expand over the content)

    I've tried modifying the javascript used here, but it doesn't seem to work for me.  Perhaps the problem is MOSS itself?
  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 26 Jun 2008 Link to this post

    Hi Leo,

    I suggest to examine our KB articles, which concern the integration of RadSplitter and RadMenu:

    http://www.telerik.com/support/kb/article/b454K-tkm-b454T-cka-b454c-cka.aspx
    http://www.telerik.com/support/kb/article/b454K-tgk-b454T-cka-b454c-cka.aspx

    In case this does not help, please open a new support ticket and send me a sample , reproduction project along with your explanations. Once I receive it, I will do my best to modify it in order to meet your requirements.

    Best wishes,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top