Using RadControls for ASP.NET AJAX Q3 2008, I have page containing a RadSplitter with 3 horizontal RadPanes. The top and bottom panes contain sliders with a single tab each. I want to completely hide the tab container when the pane is expanded or docked. Through trial and error I found that the following works, but is there a better way?
<script type="text/javascript" language="javascript" enableviewstate="false"> |
function HideTabContainer(sender, eventArgs) { |
var slidingZone = sender._parent.get_id() |
var tabsContainer = $find(slidingZone).getTabsContainer(); |
var panesContainerElement = document.getElementById(sender._originalParent.id); |
panesContainerElement.style.height = parseInt(tabsContainer.offsetHeight) + "px"; |
tabsContainer.style.height = "0px"; |
sender.hideTab(); |
} |
function ShowTabContainerBeforeCollaspe(sender, eventArgs) { |
var slidingZone = sender._parent.get_id() |
var tabsContainer = $find(slidingZone).getTabsContainer(); |
var panesContainerElement = document.getElementById(sender._originalParent.id); |
tabsContainer.style.height = panesContainerElement.style.height; |
panesContainerElement.style.height = "" |
sender.showTab(); |
} |
function ShowTabContainerBeforeUndock(sender, eventArgs) { |
sender.showTab(); |
} |
</script> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"/> |
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" width="100%" Height="100%"> |
<telerik:RadPane ID="RadPane1" runat="server" IsClientID="True" Collapsed="false"> |
<telerik:RadSlidingZone ID="RadSlidingZone1" ClickToOpen="true" runat="server" SlideDirection="Bottom" IsClientID="True" > |
<telerik:RadSlidingPane ID="RadSlidingPane1" EnableDock="true" Title="Header" Height="200px" runat="server" |
OnClientBeforeExpand="HideTabContainer" OnClientBeforeDock="HideTabContainer" |
OnClientBeforeUndock="ShowTabContainerBeforeUndock" OnClientBeforeCollapse="ShowTabContainerBeforeCollaspe"> |
<table style="width="100%"> |
<tr> |
<td></td> |
</tr> |
</table> |
</telerik:RadSlidingPane> |
</telerik:RadSlidingZone> |
</telerik:RadPane> |
<telerik:RadPane ID="RadPane2" runat="server" Height="650px"> |
<table style="width: 100%"> |
<tr> |
<td style="height: 650px;"> |
<telerik:RadMultiPage id="RadMultiPage1" EnableViewState="false" runat="server"> |
<telerik:RadPageView id="RadPageView1" runat="server" Width="100%" Height="100%" /> |
<telerik:RadPageView id="RadPageView2" runat="server" Width="100%" Height="100%" /> |
<telerik:RadPageView id="RadPageView3" runat="server" Width="100%" Height="100%" /> |
<telerik:RadPageView id="RadPageView4" runat="server" Width="100%" Height="100%" /> |
<telerik:RadPageView id="RadPageView5" runat="server" Width="100%" Height="100%" /> |
</telerik:RadMultiPage> |
</td> |
</tr> |
</table> |
</telerik:RadPane> |
<telerik:RadPane ID="RadPane3" runat="server"> |
<telerik:RadSlidingZone ID="RadSlidingZone2" ClickToOpen="true" runat="server" SlideDirection="Top" IsClientID="True" > |
<telerik:RadSlidingPane ID="RadSlidingPane2" EnableDock="true" Title="Footer" runat="server" |
OnClientBeforeExpand="HideTabContainer" OnClientBeforeDock="HideTabContainer" |
OnClientBeforeUndock="ShowTabContainerBeforeUndock" OnClientBeforeCollapse="ShowTabContainerBeforeCollaspe"> |
<table style="width: 100%"> |
<tr> |
<td></td> |
</tr> |
</table> |
</telerik:RadSlidingPane> |
</telerik:RadSlidingZone> |
</telerik:RadPane> |
</telerik:RadSplitter> |