Dock Splitter On Open, Click to Close

3 posts, 1 answers
  1. hacker
    hacker avatar
    78 posts
    Member since:
    Nov 2006

    Posted 15 Apr 2009 Link to this post

    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.


  2. Answer
    Svetlina Anati
    Svetlina Anati avatar
    2795 posts

    Posted 17 Apr 2009 Link to this post

    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());

            <telerik:RadSplitter Skin="Office2007" SplitBarsSize="4" ID="RadSplitter1" runat="server"
                <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:RadSplitBar ID="bar1" runat="server" />
                <telerik:RadPane ID="RadPane1" runat="server">

    All the best,

    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.
  3. DevCraft R3 2016 release webinar banner
  4. hacker
    hacker avatar
    78 posts
    Member since:
    Nov 2006

    Posted 17 Apr 2009 Link to this post

    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()) { 
                } else { 

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

Back to Top