This is a migrated thread and some comments may be shown as answers.

Sliding Pane not appearing after docking/undocking programatically

2 Answers 168 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Ryan asked on 15 Mar 2010, 09:59 PM

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 Answers, 1 is accepted

Accepted

answered on 16 Mar 2010, 08:07 AM

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.