This is a migrated thread and some comments may be shown as answers.
Hide TabsContainer
1 Answer 30 Views
This is a migrated thread and some comments may be shown as answers.
morgan
Top achievements
Rank 1
morgan asked on 31 Mar 2009, 03:51 PM

Using RadControls for ASP.NET AJAX Q3 2008, I have page containing a RadSplitter with 3 horizontal RadPanes.  The top and bottom panes contain sliders with a single tab each.  I want to completely hide the tab container when the pane is expanded or docked.  Through trial and error I found that the following works, but is there a better way? 


    
        <script type="text/javascript" language="javascript" enableviewstate="false">  
 
        function HideTabContainer(sender, eventArgs) {  
            var slidingZone = sender._parent.get_id()  
            var tabsContainer = $find(slidingZone).getTabsContainer();  
            var panesContainerElement = document.getElementById(sender._originalParent.id);   
                      
            panesContainerElement.style.height = parseInt(tabsContainer.offsetHeight) + "px";     
            tabsContainer.style.height = "0px";  
            sender.hideTab();  
        }  
          
        function ShowTabContainerBeforeCollaspe(sender, eventArgs) {  
            var slidingZone = sender._parent.get_id()  
            var tabsContainer = $find(slidingZone).getTabsContainer();  
            var panesContainerElement = document.getElementById(sender._originalParent.id);   
              
            tabsContainer.style.height = panesContainerElement.style.height;  
            panesContainerElement.style.height = "" 
            sender.showTab();  
        }  
 
        function ShowTabContainerBeforeUndock(sender, eventArgs) {  
            sender.showTab();  
        }  
          
        </script> 
 
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"/>  
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" width="100%" Height="100%">  
            <telerik:RadPane ID="RadPane1" runat="server" IsClientID="True" Collapsed="false">  
                <telerik:RadSlidingZone ID="RadSlidingZone1" ClickToOpen="true" runat="server" SlideDirection="Bottom" IsClientID="True" > 
                    <telerik:RadSlidingPane ID="RadSlidingPane1" EnableDock="true" Title="Header" Height="200px" runat="server" 
                        OnClientBeforeExpand="HideTabContainer" OnClientBeforeDock="HideTabContainer"   
                        OnClientBeforeUndock="ShowTabContainerBeforeUndock" OnClientBeforeCollapse="ShowTabContainerBeforeCollaspe">  
                        <table style="width="100%"> 
                             <tr> 
                                <td></td>  
                             </tr> 
                        </table> 
                    </telerik:RadSlidingPane> 
                </telerik:RadSlidingZone> 
            </telerik:RadPane> 
            <telerik:RadPane ID="RadPane2" runat="server" Height="650px">  
                <table style="width: 100%">  
                    <tr> 
                        <td style="height: 650px;">  
                            <telerik:RadMultiPage id="RadMultiPage1" EnableViewState="false" runat="server">  
                                <telerik:RadPageView id="RadPageView1" runat="server" Width="100%" Height="100%" /> 
                                <telerik:RadPageView id="RadPageView2" runat="server" Width="100%" Height="100%" /> 
                                <telerik:RadPageView id="RadPageView3" runat="server" Width="100%" Height="100%" /> 
                                <telerik:RadPageView id="RadPageView4" runat="server" Width="100%" Height="100%" /> 
                                <telerik:RadPageView id="RadPageView5" runat="server" Width="100%" Height="100%" /> 
                            </telerik:RadMultiPage> 
                        </td> 
                    </tr> 
              </table> 
            </telerik:RadPane> 
            <telerik:RadPane ID="RadPane3" runat="server">  
                <telerik:RadSlidingZone ID="RadSlidingZone2" ClickToOpen="true" runat="server" SlideDirection="Top" IsClientID="True" > 
                    <telerik:RadSlidingPane ID="RadSlidingPane2" EnableDock="true" Title="Footer" runat="server"   
                        OnClientBeforeExpand="HideTabContainer" OnClientBeforeDock="HideTabContainer"   
                        OnClientBeforeUndock="ShowTabContainerBeforeUndock" OnClientBeforeCollapse="ShowTabContainerBeforeCollaspe">  
                        <table style="width: 100%">  
                            <tr> 
                                <td></td>  
                            </tr> 
                        </table>                      
                    </telerik:RadSlidingPane> 
                </telerik:RadSlidingZone> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
 

1 Answer, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 03 Apr 2009, 08:25 AM
Hi Morgan,

I built up a test demo based on your code in order to get a better understanding on what you mean. However, your code seems to be correct and I could not see what was wrong. Would you please explain in details what is the problem with the code?

On a side note, I suggest to set VisibleDuringInit="false" for the RadSplitter - this will hide the initializing of the splitter and you will get a better appearance when the page loads. 


Best wishes,
Svetlina
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Asked by
morgan
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Share this question
or