This is a migrated thread and some comments may be shown as answers.

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

12 Answers 318 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 17 Jul 2008, 12:02 AM
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> 
 

12 Answers, 1 is accepted

Sort by
0
Sophy
Telerik team
answered on 18 Jul 2008, 09:14 AM
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
0
David
Top achievements
Rank 1
answered on 18 Jul 2008, 03:24 PM
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
0
Svetlina Anati
Telerik team
answered on 21 Jul 2008, 10:24 AM
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
0
David
Top achievements
Rank 1
answered on 25 Jul 2008, 04:04 PM
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> 

0
Svetlina Anati
Telerik team
answered on 29 Jul 2008, 02:27 PM
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.
0
AL
Top achievements
Rank 1
answered on 14 Apr 2009, 06:44 PM
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
0
Svetlina Anati
Telerik team
answered on 17 Apr 2009, 12:18 PM
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.
0
AL
Top achievements
Rank 1
answered on 17 Apr 2009, 04:47 PM
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.


0
Marc Villella
Top achievements
Rank 1
answered on 21 Feb 2010, 03:52 PM
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
0
AL
Top achievements
Rank 1
answered on 24 Feb 2010, 02:55 PM
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!



0
Marc Villella
Top achievements
Rank 1
answered on 24 Feb 2010, 03:41 PM
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

 

0
AL
Top achievements
Rank 1
answered on 24 Feb 2010, 05:05 PM
Nice.Thanks for sharing!
Tags
Splitter
Asked by
David
Top achievements
Rank 1
Answers by
Sophy
Telerik team
David
Top achievements
Rank 1
Svetlina Anati
Telerik team
AL
Top achievements
Rank 1
Marc Villella
Top achievements
Rank 1
Share this question
or