Dock Splitter On Open, Click to Close

[hacker]

I have a Splitter on a page with 2 panes and a single SlideingZone.  The zone is used to hide away the search options for the page.  I found an old forum post that has most of the functionality I want to have.  If you click on the SlidingPane Title, the pane slides out and automatically docks open.  Perfect.  But, I want to be able to click on the SlidingPane Title and have it un-dock and close.  How do I get that to happen?

The referenced post is quite old, so perhaps there is a different way to do it now.  I am using Q1 2009.

Thanks!

[Svetlina Anati]

Hi soatley,

You can use the RadSplitter's client-side API to reference the DIV element which represents the title of the RadSlidingPane and attach an onclick handler which undocks the pane. I prepared for you a sample script, which you can use as a start point and improve it according to your preferences:

 <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager" runat="server" />

        <script type="text/javascript">

        function OnClientLoaded(sender, args)
        {
           var slidingPane = $find("<%=slide1.ClientID %>");
           var titleElement = slidingPane.getSlidingContainerTitle();
           titleElement.onclick = closePane;
        }
       
        function closePane()
        {
          $find("<%=zone.ClientID%>").undockPane($find("<%=slide1.ClientID %>").get_id());
        }
        </script>

        <telerik:RadSplitter Skin="Office2007" SplitBarsSize="4" ID="RadSplitter1" runat="server"
            Orientation="Horizontal">
            <telerik:RadPane ID="pane1" runat="server" Height="22">
                <telerik:RadSlidingZone ID="zone" runat="server" OnClientLoaded="OnClientLoaded">
                    <telerik:RadSlidingPane ID="slide1" runat="server" Title="First">
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="bar1" runat="server" />
            <telerik:RadPane ID="RadPane1" runat="server">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </form>
 

All the best,

Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[hacker]

Hi Svetlina.

That worked great!  Thanks!

I modified it slightly and here is my modified code for others that are interested:

     function OnClientLoaded(sender, args) {
            var slidingPane = $find("rspSearch");
            var titleElement = slidingPane.getTabContainer();
            titleElement.onclick = doPane;
        }

        function doPane() {
            var slidingPane = $find("rspSearch");
            if (slidingPane.get_docked()) {
                $find("rszLeft").undockPane($find("rspSearch").get_id());
            } else {
                $find("rszLeft").dockPane($find("rspSearch").get_id());
            }
        }

When clicking on the tab to open the pane, it will dock it open.  Then, clicking on the tab again will close it.

Shawn