Hide TabsContainer

[morgan]

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>

[Svetlina Anati]

Hi Morgan,

I built up a test demo based on your code in order to get a better understanding on what you mean. However, your code seems to be correct and I could not see what was wrong. Would you please explain in details what is the problem with the code?

On a side note, I suggest to set VisibleDuringInit="false" for the RadSplitter - this will hide the initializing of the splitter and you will get a better appearance when the page loads. 


Best wishes,
Svetlina
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.