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
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.
Rank 1