Sliding Pane not appearing after docking/undocking programatically

3 posts, 1 answers
  1. Ryan
    Ryan avatar
    5 posts
    Member since:
    Feb 2009

    Posted 15 Mar 2010 Link to this post

    I am using the RadSplitter control with a RadSlidingZone containing 2 RadSlidingPanes. I don't want the standard pane header in the SlidingPane to display (so it's hidden using css) but still want to have the ability to dock/undock each of the sliding panes. The dock/undock functionality is triggered by clicking buttons that call methods in the client API of the slidingzone/slidingpane... this works well, but as soon as I dock one of the panes, the sliding panes don't come out if I hover over the tab in the sliding zone. Is there something else I need to do in order to show the sliding pane when the user hover overs a sliding zone tab?

    In the code below, the buttons will dock/undock Panes 1 and 2. After clicking on the buttons, the other pane no longer slides out from the vertical tabs in the sliding zone.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage_Splitter.aspx.cs" Inherits="TestPage_Splitter" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
    <html> 
    <head id="Head1" runat="server">  
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
            <style> 
                /* hide the default radslidingpane header */  
                .RadSplitter .rspSlideHeader TABLE  
                {  
                    display: none;  
                }  
            </style> 
          
            <script type="text/javascript" language="javascript">  
                function TogglePane(paneID) {  
                    var slidingZone = $find("<%=RadSlidingZone1.ClientID%>");  
                    var slidingPane = slidingZone.getPaneById(paneID);  
                    var isDocked = slidingPane.get_docked();  
                    var result;  
                    if (isDocked) {  
                        result = slidingZone.undockPane(paneID);  
                    } else {  
                        result = slidingZone.dockPane(paneID);  
                    }  
     
                }  
            </script> 
        </telerik:RadCodeBlock> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager runat="server" ID="ScriptManager" /> 
            <telerik:RadSplitter runat="server" id="RadSplitter1" height="100%" width="100%">  
                <telerik:RadPane ID="RadPaneOuter1" runat="server">  
                    <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="22px" DockedPaneId="RadSlidingPane1">  
                        <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Width="275px" Title="Pane 1">  
                            Pane 1  
                            <button onclick="TogglePane('<%=RadSlidingPane1.ClientID%>');">Toggle Pane</button> 
                        </telerik:RadSlidingPane> 
                        <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Width="275px" Title="Pane 2">  
                            Pane 2  
                            <button onclick="TogglePane('<%=RadSlidingPane2.ClientID%>');">Toggle Pane</button> 
                        </telerik:RadSlidingPane> 
                    </telerik:RadSlidingZone> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" /> 
                <telerik:RadPane runat="server" id="RadPaneOuter2">  
                    <telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Vertical">  
                        <telerik:RadPane ID="RadPane3" runat="server">  
                            Pane 3  
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" /> 
                        <telerik:RadPane ID="RadPane4" runat="server">  
                            Pane 4  
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 
     
     

     

  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 16 Mar 2010 Link to this post

    Hi Ryan,
    You need to collapse the sliding pane, before you dock it. For example:
    <script type="text/javascript">
        function TogglePane(paneID)
        {
            var slidingZone = $find("<%=RadSlidingZone1.ClientID%>");
            var slidingPane = slidingZone.getPaneById(paneID);
            var isDocked = slidingPane.get_docked();
            var result;
            if (isDocked)
            {
                result = slidingZone.undockPane(paneID);
            } else
            {
                slidingZone.collapsePane(paneID,true);
                result = slidingZone.dockPane(paneID);
            }
        }
    </script>

    Best wishes,
    Tsvetie
    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. Ryan
    Ryan avatar
    5 posts
    Member since:
    Feb 2009

    Posted 16 Mar 2010 Link to this post

    Ah, I figured it was something simple.... everything is working now. Thanks Tsvetie!
Back to Top