Hide TabsContainer

2 posts, 0 answers
  1. morgan
    morgan avatar
    1 posts
    Member since:
    Aug 2006

    Posted 31 Mar 2009 Link to this post

    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> 
     
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 03 Apr 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top