how to make footer expand with content on 100% height panes?

13 posts, 0 answers
  1. David
    David avatar
    6 posts
    Member since:
    Mar 2008

    Posted 16 Jul 2008 Link to this post

    The splitter is working well, but there is one thing I am not sure how to do.  I am using the 100% height technique, a footer, a header, left pane, right pane.  I created a treeview in the left pane and right pane windows.  When the treeview expands out, it creates a scroll bar for both panes.  If I turn scrolling off on the pane, the treeview then is hidden behind the footer.  Is it possible for when either pane has content that expands beyond the available height that the footer gets pushed down and the browser scroll appears instead of the pane scroll.  I like how it works now that the footer sticks to the bottom of the browser window, even when you resize by using the splitters offset property, but I want the footer to get pushed down when the left, or right when the content expands.
    I've seen this work using div tags, but am not sure how to do it with the rad splitter.  Below is code containing what I described above.

    Thanks,

    Risso

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head id="Head1" runat="server">     
        <title>Untitled Page</title>    
        <style type="text/css">     
        html, body, form     
        {     
            height: 100%;     
            overflow: hidden;     
            margin: 0px;     
            padding: 0px;     
        }     
        </style>    
    </head>    
    <body>    
        <form id="form1" runat="server">   
     
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
           <div id="header" style="height:100px;background-color:Gray;">Header</div>    
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"     
                HeightOffset="200">     
                <telerik:RadPane ID="RadPane1" runat="server" BackColor="LightBlue" Width="215" > 
                    <asp:TreeView ID="TreeView1" runat="server">  
                        <Nodes> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node">  
                                <asp:TreeNode Text="New Node" Value="New Node">  
                                    <asp:TreeNode Text="New Node" Value="New Node">  
                                        <asp:TreeNode Text="New Node" Value="New Node">  
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        </asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                    </asp:TreeNode> 
                                    <asp:TreeNode Text="New Node" Value="New Node">  
                                        <asp:TreeNode Text="New Node" Value="New Node">  
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        </asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                    </asp:TreeNode> 
                                    <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                </asp:TreeNode> 
                            </asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                        </Nodes> 
                    </asp:TreeView> 
                </telerik:RadPane>    
                <telerik:RadSplitBar ID="RadPaneSplitBar1" runat="server" CollapseMode="forward" /> 
                <telerik:RadPane ID="RadPane2" runat="server" BackColor="green">  
                    <asp:TreeView ID="TreeView2" runat="server">  
                        <Nodes> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node">  
                                <asp:TreeNode Text="New Node" Value="New Node">  
                                    <asp:TreeNode Text="New Node" Value="New Node">  
                                        <asp:TreeNode Text="New Node" Value="New Node">  
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        </asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                    </asp:TreeNode> 
                                    <asp:TreeNode Text="New Node" Value="New Node">  
                                        <asp:TreeNode Text="New Node" Value="New Node">  
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        </asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                    </asp:TreeNode> 
                                    <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                </asp:TreeNode> 
                            </asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                        </Nodes> 
                    </asp:TreeView> 
                  
                </telerik:RadPane>    
            </telerik:RadSplitter>    
            <div id="footer" style="height:100px;background-color:Gray;">Footer</div>    
        </form>    
     
    </body> 
    </html> 
     
  2. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 18 Jul 2008 Link to this post

    Hi David,

    If you want to avoid splitter's scrolling but use browser's scrolling instead, you will need to set the height of the splitter and the panes to the corresponding value via javascript when the browser is resized or the treenodes are expanded/collapsed. You will need to find the scroll height of the panes and set the height of the splitter to largest height of the panes. In this way you will not have scrollbars in the splitter, but the scrollbars of the browser window will appear.
    Please, let us know if you need further assistance.

    Sincerely yours,
    Sophy
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    6 posts
    Member since:
    Mar 2008

    Posted 18 Jul 2008 Link to this post

    I have seen some javascript examples on your forums in regarding to resizing a splitter, but didn't find one that is also using your footer technique at the same time.  Those examples were just left pane and right pane examples.
    Would you guys have a snipplet of javascript code that demonstrates resizing all content so the splitter uses the browser scroll bar, while always have a footer at the bottom of the browser screen  until the content pushes it out?
    Risso
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 21 Jul 2008 Link to this post

    Hello David,

    I am afraid I was not able to completely understand your requirements.

    In case you want to resize the splitter and still have the footer, you should use the described approach - resize the splitter according to the new pane's height.

    In case you want to resize the splitter and hide the footer, you can use the above mentioned javascript and set the footer's display to none.

    I attached a sample project, which demonstrates the explained functionality. the resize is done on page load and in your case you should also use the same handler for the RadPane's OnClientResized event.

    Kind regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. David
    David avatar
    6 posts
    Member since:
    Mar 2008

    Posted 25 Jul 2008 Link to this post

    Ok, I took your advise and put onresize event to the footer and now the pane resize correctly whenever you resize the browser window.  Everything seems to work ok, but one thing.  Still, whenever you expand any control in the right pane it doesn't use the browser's scroll button and doesn't push the footer down.  I've tried adding onclient resize to the pain to see if it would push the footer down and create a scroll bar on the browser and it doesn't.  It goes behind the code.  Is there some way in javascript to detect the height of the pane whenever a control expands and shut off the offset javascript to the splitter?  I think the offset javascript is what causes it, but the splitter offset is needed to keep the footer at the bottom when the control's height isn't big enough to push it out of the browser window.  Any way of knowing how to do this?  Thanks, David

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXEnabledWebApplication1._Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head id="Head1" runat="server">  
        <title>Untitled Page</title> 
         <style type="text/css">     
        html, body, form     
        {     
            height: 100%;     
            margin: 0px;     
            padding: 0px;     
        }     
        </style>    
    </head> 
    <body> 
        <script type="text/javascript">  
        function SplitterLoaded(splitter, arg)  
        {  
            var pane = splitter.getPaneById('<%= RadPane2.ClientID %>');       
            var height = pane.getContentElement().scrollHeight;              
              
            //if you want to hide the footer, use the following line  
            //$get('footer').style.display = 'none';  
            if(height > document.body.clientHeight  - 200)  
            {             
                splitter.set_height(height);  
                  
            }  
        }  
        function afterResize(splitter, Args)  
        {          
           var pane = splitter.getPaneById('<%= RadPane2.ClientID %>');       
           var height = pane.getContentElement().scrollHeight;   
                    
           if(height > document.body.clientHeight  - 200)  
                splitter.set_height(height);  
         }  
     
        </script> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server" />         
            <div id="header" style="height:100px;background-color:Gray;">Header</div>    
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" OnClientLoaded="SplitterLoaded"  OnClientResized="afterResize"    
                HeightOffset="200">     
                <telerik:RadPane ID="RadPane1" runat="server" BackColor="LightBlue" Width="215" > 
                    <asp:TreeView ID="TreeView1" runat="server">  
                        <Nodes> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node">  
                                <asp:TreeNode Text="New Node" Value="New Node">  
                                    <asp:TreeNode Text="New Node" Value="New Node">  
                                        <asp:TreeNode Text="New Node" Value="New Node">  
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        </asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                    </asp:TreeNode> 
                                    <asp:TreeNode Text="New Node" Value="New Node" > 
                                        <asp:TreeNode Text="New Node" Value="New Node">  
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        </asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                    </asp:TreeNode> 
                                    <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                </asp:TreeNode> 
                            </asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                        </Nodes> 
                    </asp:TreeView> 
                </telerik:RadPane>    
                <telerik:RadSplitBar ID="RadPaneSplitBar1" runat="server" CollapseMode="forward" /> 
                <telerik:RadPane ID="RadPane2" runat="server" BackColor="green" Scrolling="x" > 
                    <asp:TreeView ID="TreeView2" runat="server">  
                        <Nodes> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node">  
                                <asp:TreeNode Text="New Node" Value="New Node">  
                                    <asp:TreeNode Text="New Node" Value="New Node">  
                                        <asp:TreeNode Text="New Node" Value="New Node">  
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        </asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                    </asp:TreeNode> 
                                    <asp:TreeNode Text="New Node" Value="New Node">  
                                        <asp:TreeNode Text="New Node" Value="New Node" Expanded="false" > 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                        </asp:TreeNode> 
                                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                    </asp:TreeNode> 
                                    <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                                </asp:TreeNode> 
                            </asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> 
                        </Nodes> 
                    </asp:TreeView> 
                  
                </telerik:RadPane>    
            </telerik:RadSplitter>    
            <div id="footer" style="height:100px;background-color:Gray;">Footer</div>       
        </form>      
    </body> 
    </html> 

  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 29 Jul 2008 Link to this post

    Hi David,

    I prepared a sample demo project based on the discussed javascript - you can find it in the attached archive file.
    As far as I understand it meets your requirements. I hope that it is helpful, feel free to modify it further in order to meet your needs.

    Regards,
    Svetlina
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. AL
    AL avatar
    40 posts
    Member since:
    May 2008

    Posted 14 Apr 2009 Link to this post

    What would be Telerik's suggestion when the splitter is created in an aspx page that inherits a MasterPage? How is it possible to reposition the footer which is located inside a Master Page?

    Additional Details: I have a Master Page (Default.Master). I have an aspx page Survey.aspx that inherits this MasterPage. THe splitter is created inside the Survey.aspx page. When the Height of the content page changes ( i.e Height of the Survey.aspx page) I want the Footer (located inside the Master Page) to reposition itself.

    Any suggestions and help would be truly appreciated,

    Thanks Telerik.

    AL
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 17 Apr 2009 Link to this post

    Hi AL,

    I am afraid I could not completely understand how you change the size of the content page and what repositioning you want to make for the footer, do you mean resizing instead of repositioning or not? In case you resize the content page by resizing the browser, everything should resize correctly automatically. Otherwise, if you make some dynamic resizing, you can easily use javascript to resize whatever you want - the splitter offers such methods in its client-side API, furthermore you say that you want to resize or reposition the footer which does not concern the splitter.

    In case you need further assistance, please prepare a sample, fully runnable reproduction demo, open a new support ticket and send it to me along with detailed explanations of the actual and the desired behavior, detailed steps to reproduce and some screenshots of the very same attached demo with the problem marked. Once I have a better understanding on the exact configuration and scenario, I will do my best to help.


    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. AL
    AL avatar
    40 posts
    Member since:
    May 2008

    Posted 17 Apr 2009 Link to this post

    Hi Svetlina,

    Your response contained an idea ("you can easily use javascript to resize whatever you want"), which I implemented and solved my problem ;-)

    I had a 3-level hierarchy (MasterPage >> aspx page (splitter page) >> aspx page (content page). I first calculated the height of the contentPage and passed that information to the splitterPage (that is what your customCode is doing). I then passed that height information to the MasterPage and repositioned the footer. Now the page looks great with dynamic height of contentPage.

    Thanks for your previous posts and this one as well.

    AL.


  11. Marc Villella
    Marc Villella avatar
    2 posts
    Member since:
    Feb 2006

    Posted 21 Feb 2010 Link to this post

    Al,

    Any chance you'd post a code snippet for getting the content to resize?  I'm trying to do something similar and am having some trouble getting the eventing to work properly across the 3 pages (Content -> Splitter -> Master).

    Thanks in advance,
    Marc
  12. AL
    AL avatar
    40 posts
    Member since:
    May 2008

    Posted 24 Feb 2010 Link to this post

    Marc,

    Even though I got the 100% height to work correctly, I got extremely frustrated with eventing to work. Therefore I abandoned it long time ago. My primary goal was to create a cool navigation layout. if your primary reason is to make cool navigation layout then I suggest you use the following code in your master's page head tag:

        <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.2)" />
        <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.2)" />

    Just go ahead and embed it in your existing master page, and then try to navigate. you will notice the page does not flicker and gives an impression as if the header, footer are the same and only the contentpage and url is changing.

    Hope this helps!



  13. Marc Villella
    Marc Villella avatar
    2 posts
    Member since:
    Feb 2006

    Posted 24 Feb 2010 Link to this post

    Thanks for the reply, Al.

    I ended up getting mine to work on a two-pane master page by doing the following (based on other posts here):

    1. Add 'OnClientLoaded' client-script event to splitter:  

    OnClientLoaded

     

    ="SplitterNavLoaded"

    2. Add Javascript function to re-calculate the height on load, as well as provide a function, splitterResize(), to call when another event happened to where it got recalculated:

     

    <script type="text/javascript">  
        var pageSplitter;  
        var paneNav;  
        var paneMain;  
        var paneRight;  
          
        function SplitterNavLoaded(splitter, arg) {  
            pageSplitter = splitter;  
            paneNav = splitter.getPaneById('<%= splitterNavPane.ClientID %>');  
            paneMain = splitter.getPaneById("<%= splitterContentPane.ClientID %>");  
            splitterResize();  
        }  
        function splitterResize() {  
            var navHeight = paneNav.getContentElement().scrollHeight;  
            var mainHeight = paneMain.getContentElement().scrollHeight;  
     
            //determine which pane has larger height  
            if (navHeight <= mainHeight) {  
                setTwoColSplitterHeight(mainHeight);  
            } else {  
                setTwoColSplitterHeight(navHeight);          
            }  
        }  
     
        function setTwoColSplitterHeight(inHeight) {  
            pageSplitter.set_height(inHeight);  
            paneNav.set_height(inHeight);  
            paneMain.set_height(inHeight);  
        }  
        </script> 

    Then, when I expand a node in the nav tree I call 'splitterResize()'.

     


    Also, in the Main Content pane, I found it very useful when using an Ajax panel, to use ResponseScripts.Add() function to the page_onload() event to call the resize function after a panel had been updated:

     

    RadAjaxPanel1.ResponseScripts.Add("splitterResize();"); 

    Marc

     

  14. AL
    AL avatar
    40 posts
    Member since:
    May 2008

    Posted 24 Feb 2010 Link to this post

    Nice.Thanks for sharing!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017