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">   
    <head id="Head1" runat="server">  
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
                /* hide the default radslidingpane header */  
                .RadSplitter .rspSlideHeader TABLE  
                    display: none;  
            <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);  
        <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 ID="RadSlidingPane2" runat="server" Width="275px" Title="Pane 2">  
                            Pane 2  
                            <button onclick="TogglePane('<%=RadSlidingPane2.ClientID%>');">Toggle Pane</button> 
                <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:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" /> 
                        <telerik:RadPane ID="RadPane4" runat="server">  
                            Pane 4  


  2. Answer
    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
                result = slidingZone.dockPane(paneID);

    Best wishes,
    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. DevCraft R3 2016 release webinar banner
  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