Hi,
I have a single sliding pane setup horizontally that is used like a quick search window. Is it possible to hide the tab when the user docks the pane using CSS?
I'm doing something like this in my CSS, please tell me what I'm missing...
<style type="text/css"> .paneTabContainerExpandedHorizontal, rspSlidePane { /*visibility:hidden !important;*/ display:none !important; } html, body, form { height: 100%; margin: 0px; padding: 0px; overflow: hidden; } </style>This is my html code:
<body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server" ></telerik:RadScriptManager> <script type="text/javascript"> function PaneDockedHandler(sender, eventArgs) { var slidingZone = $find("<%= SpeedSearchSlidingZone.ClientID %>"); var pane = slidingZone.getPaneById(slidingZone.get_dockedPaneId()); if (pane) { pane.hideTab(); } } </script> <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" width="100%" Height="100%"> <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="None" > <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Height="100%"> <telerik:RadSlidingPane ID="LeadSearchSlidePane" Title="Search Criteria" runat="server" width="150px"> <uc1:LeadSearchCriteria runat="server" ID="LeadSearchCriteria" /> </telerik:RadSlidingPane> <telerik:RadSlidingPane ID="TreeListSlidePane" Title="Tree View" runat="server"> <uc2:LeadSearchTreeView runat="server" ID="LeadSearchTreeView" /> </telerik:RadSlidingPane> </telerik:RadSlidingZone> </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitBar1" runat="server" BorderWidth="1px" Width="1px" /> <telerik:RadPane ID="RightPane" runat="server" > <telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Horizontal" Width="100%" Height="100%"> <telerik:RadPane ID="SpeedSearchPane" runat="server" Scrolling="None" Height="22px"> <telerik:RadSlidingZone ID="SpeedSearchSlidingZone" runat="server" Height="22px"> <telerik:RadSlidingPane ID="SpeedSearchSlidingPane" Title="Speed Lead" runat="server" OnClientDocked="PaneDockedHandler" > speed lead content </telerik:RadSlidingPane> </telerik:RadSlidingZone> </telerik:RadPane> <telerik:RadPane ID="LeadResultPane" runat="server" Scrolling="None"> content </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> </telerik:RadSplitter> </form></body></html>As you can see, I'm also trying to hide the tab using javascript by following this example here:
it hides the tab but leaves an empty space. If I use OnClientBeforeDock or OnClientDocking, slidingZone.get_dockedPaneId() returns null and wouldn't go to the hideTab statement. I have attached a screen shot of the tab layouts.
Please tell me if it's possible to do this using CSS? If not, is there a way to get ride of the empty space besides messing with the width and height as done in the example above?
Thank you for your help~
Helen
2 Answers, 1 is accepted
0
Hi ,
The sender of the ClientDocked and ClientUndocked events is the RadPane which is about to be docked, so you do not need to get a reference to it through the sliding zone. You can access it directly in the following way:
On a side note, the funcionality of the hideTab() method is only to hide the current tab, but not its container so if there are other tabs they would remain visible. If you would like to hide/show also the wrapping tabs container, this could be achieved in a similar way:
I hope this helps.
Regards,
Vessy
Telerik
The sender of the ClientDocked and ClientUndocked events is the RadPane which is about to be docked, so you do not need to get a reference to it through the sliding zone. You can access it directly in the following way:
<telerik:RadSlidingPane ID="SpeedSearchSlidingPane" Title="Speed Lead" runat="server" OnClientDocked="PaneDockedHandler" OnClientUndocked="PaneUndockedHandler"> speed lead content</telerik:RadSlidingPane><script type="text/javascript"> function PaneDockedHandler(pane, eventArgs) { pane.hideTab(); } function PaneUndockedHandler(pane, eventArgs) { pane.showTab(); }</script>On a side note, the funcionality of the hideTab() method is only to hide the current tab, but not its container so if there are other tabs they would remain visible. If you would like to hide/show also the wrapping tabs container, this could be achieved in a similar way:
<telerik:RadSlidingPane ID="SpeedSearchSlidingPane" Title="Speed Lead" runat="server" OnClientDocking="PaneDockedHandler" OnClientUndocking="PaneUndockedHandler"> speed lead content</telerik:RadSlidingPane><script type="text/javascript"> function PaneDockingHandler(pane, eventArgs) { pane.getTabContainer().parentNode.style.display = "none"; } function PaneUndockingHandler(pane, eventArgs) { pane.getTabContainer().parentNode.style.display = "block"; }</script>I hope this helps.
Regards,
Vessy
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Helen
Top achievements
Rank 1
Rank 1
answered on 03 Apr 2014, 08:20 PM
Vessy,
It's just what I needed! Thank you.
It's just what I needed! Thank you.