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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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