Hiding Tab when only one sliding pane and docked

4 posts, 0 answers
  1. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 05 Mar 2010 Link to this post

    I have a scenario where only a single sliding pane exists in a sliding zone. When this pane is docked, the tab is unecessary and justs wastes space, so I want to hide it. I have been using the following which has worked untill recently..

     function PaneDockedHandler() {  
                    var slidingZone=$find("<%= szMyZone.ClientID %>");  
                    var dockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());  
                      
                    if (dockedPane) {  
                        dockedPane.hideTab();  
                    }  
                }  
     
                function BeforePaneUndockedHandler(slidingZone) {  
                    var slidingZone=$find("<%= szMyZone.ClientID %>");  
                    var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());  
                    if (undockedPane) {  
                        undockedPane.showTab();  
                    }  
                } 

    <telerik:RadSplitter ID="rsWB"   
                        runat="server"   
                        Height="100%" 
                        Width="100%" 
                        Orientation="Vertical"   
                        ResizeWithParentPane="False"   
                        ResizeWithBrowserWindow="True" 
                        BorderSize="0" 
                        VisibleDuringInit="False" 
                        Skin="Windows7" > 
                 <telerik:radpane runat="server" id="lPane" Scrolling="None" Width="22px" Height="100%">  
                    <telerik:RadSlidingZone id="szMyZone" runat="server" width="22px" Height="100%" SlideDuration="250">  
                        <telerik:RadSlidingPane id="spProcess" title="Process Properties" runat="server" width="200px" Height="100%" Scrolling="none" OnClientDocked="PaneDockedHandler" OnClientBeforeUnDock="BeforePaneUndockedHandler">  
     
                    My Pane Content  
                        </telerik:RadSlidingPane> 
                    </telerik:RadSlidingZone> 
                                              
                                              
                </telerik:radpane>     
    <telerik:radpane runat="server" id="rPane" Scrolling="None" Width="100%" Height="100%">  
    Right Pane Content  
    </telerik:radpane>   
    </telerik:RadSplitter >  

    Since upgrading to more recent controls, now the pane docked/undocked handlers leave a space between the left and right panes equal to the width of the tabs. (see attached area shown in red). How can I get this to work with the latest controls?

    BTW.. I think this ought to be the default behavior. When there is only a single sliding pane, the tabs are unecessary and should be hidden,
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 10 Mar 2010 Link to this post

    Hello Albert,

    Thank you for the provided code, I built up a test demo based on it and I was able to reproduce the problem. It comes from the fact that you hide the tab after the sliding pane is already docked and its parent pane is already resized with the tab taken into account.

    In order to get the desired result you should hook up the OnClientBeforeDock event instead as shown below:


    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
      
        <script type="text/javascript">
            function PaneDockedHandler() {
                var slidingZone = $find("<%= szMyZone.ClientID %>");
                var dockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
      
                if (dockedPane) {
                    dockedPane.hideTab();
                }
            }
      
            function BeforePaneUndockedHandler(slidingZone) {
                var slidingZone = $find("<%= szMyZone.ClientID %>");
                var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
                if (undockedPane) {
                    undockedPane.showTab();
                }
            }  
        </script>
      
        <telerik:RadSplitter ID="rsWB" runat="server" Height="100%" Width="100%" Orientation="Vertical"
            ResizeWithParentPane="False" ResizeWithBrowserWindow="True" aBorderSize="0" VisibleDuringInit="False"
            Skin="Windows7">
            <telerik:RadPane runat="server" ID="lPane" Scrolling="None" Width="22px" Height="100%">
                <telerik:RadSlidingZone ID="szMyZone" runat="server" Width="22px" Height="100%" SlideDuration="250">
                    <telerik:RadSlidingPane ID="spProcess" Title="Process Properties" runat="server"
                        Width="200px" Height="100%" Scrolling="none" OnClientBeforeDock="PaneDockedHandler"
                        OnClientBeforeUndock="BeforePaneUndockedHandler">
                        My Pane Content
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadPane runat="server" ID="rPane" Scrolling="None" Width="100%" Height="100%">
                Right Pane Content
            </telerik:RadPane>
        </telerik:RadSplitter>
        </form>


    Regards,
    Svetlina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. venkatesh
    venkatesh avatar
    1 posts
    Member since:
    Oct 2010

    Posted 07 Jul 2011 Link to this post

    HI ,

      I have followed your link (http://www.telerik.com/community/forums/aspnet/splitter/hide-tabs-if-slider-pane-docked.aspx) and also ur code but the Gap still remains the same between the Sliding panel and the right RadPanes . So could you please help me out in solving the issue.

      Here iam atttaching the screenshot of my screen....  If any one has solved it can you please give the resolution for the same. :) & here my code too ....

    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css"
            html, body, form 
            
                height: 100%; 
                margin: 0; 
                padding: 0; 
                overflow: hidden; 
            
              
            #test 
            {
                border : solid 1px Black;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:radscriptmanager id="script" runat="server">
            </telerik:radscriptmanager>
            <telerik:RadSplitter ID="MainSpliter" runat="server"  ResizeWithParentPane="true"
                Skin="Windows7" Height="100%" Width="100%">
                <telerik:RadPanes ID="LeftPanel" runat="server" Width="22"    Scrolling="None">
                    <telerik:RadSlidingZone ID="SLIDING" CssClass="test"  runat="SERVER" >
                        <telerik:RadSlidingPane ID="PANEL1" OnClientDocked="OnClientPaneDocked_QT" OnClientBeforeUndock="OnClientBeforePaneUndocked_QT"
                            runat="SERVER" Title="QUICK SEARCH" EnableDock="TRUE">
                            This pane has <b>EnableDock</b> property set to false. The default value of the
                            property is <b>true</b>.<br />
                            <br />
                            You can only resize and close this pane.
                        </telerik:RadSlidingPane>                   
                    </telerik:RadSlidingZone>   
                </telerik:RadPanes>
                 
                <%-- <telerik:RadSplitBar ID="RadSplitBar1"  runat="server"  CollapseMode="Forward">
                </telerik:RadSplitBar>--%>
       <%--<telerik:RadSplitBar ID="RadSplitbar1" runat="server">
                </telerik:RadSplitBar>--%>
                <telerik:RadPanes ID="MiddlePane" runat="server">
                    Main Pane</telerik:RadPanes>
            </telerik:RadSplitter>
      
            <script type="text/javascript">
                function OnClientPaneDocked_QT(sender, eventArgs) {
                    
                    var slidingZone = $find("<%= SLIDING.ClientID%>");
                    var container = slidingZone.getTabsContainer();
                    var dockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
                    if (dockedPane) {
                        dockedPane.hideTab();
                        dockedPane.get_element().style.width = dockedPane.get_width() + "px" 
      
                    }
                }
      
                function OnClientBeforePaneUndocked_QT(sender, eventArgs) {
                    var slidingZone = $find("<%= SLIDING.ClientID%>");
                    var container = slidingZone.getTabsContainer();
                    var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
                    if (undockedPane) {
                        undockedPane.showTab();
                    }
                
      
      
            </script>
      
        </div>
        </form>
    </body>
    </html>

     

  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 12 Jul 2011 Link to this post

    Hi Venkatesh,

    The extra visible space is actually the space taken by the TabContainer's element. To fill this extra space you need to add the width of the TabContainer 's element to the size of the sliding pane's content element and subtract it when undocking it.

    Following is the modified JavaScript code fixing the issue:
    function OnClientPaneDocked_QT(sender, eventArgs)
    {
        var slidingZone = $find("<%= SLIDING.ClientID%>");
        var container = slidingZone.getTabsContainer();
        var extraWidth = container.clientWidth;
     
        var dockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
        if (dockedPane)
        {
            dockedPane.hideTab();
            dockedPane.getContentContainer().style.width = (dockedPane.get_width() + extraWidth) + "px";
        }
    }
     
    function OnClientBeforePaneUndocked_QT(sender, eventArgs)
    {
        var slidingZone = $find("<%= SLIDING.ClientID%>");
        var container = slidingZone.getTabsContainer();
        var extraWidth = container.clientWidth;
     
        var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
        if (undockedPane)
        {
            undockedPane.showTab();
            undockedPane.getContentContainer().style.width = (undockedPane.get_width() - extraWidth) + "px";
        }
    }


    Best wishes,
    Dobromir
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top