Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Splitter / Slide Direction

The top RadSlidingZone has the SlideDirection set to Bottom (this is by default when the Orientation of the
splitter is Horizontal).

The bottom RadSlidingZone has the SlideDirection set to Top.

Pane1
Pane2
Pane3
Pane1
 
 
 
Pane1
Pane2
 
 
 
Pane2
Pane3
 
 
 
Pane3
Main Pane
Pane1
 
 
 
Pane1
Pane2
 
 
 
Pane2
Pane3
 
 
 
Pane3
Pane1
Pane2
Pane3


The left RadSlidingZone has the SlideDirection set to Right (this is by default when the Orientation of the
splitter is Vertical).

Please note that the vertical tabs use proprietary text-direction styles, which are supported by Microsoft Internet Explorer only.

P
a
n
e
1
P
a
n
e
2
P
a
n
e
3
Main Pane
P
a
n
e
1
P
a
n
e
2
P
a
n
e
3

  • Slide direction

    You can position the RadSlidingZone at the Left, Right, Top and Bottom ends of the splitter. In any of these cases, the SlideDirection property will give you the ability to slide the panes to the expected direction:

    To enable "Left to Right" sliding set the value of the SlideDirection property to "Right".
    To enable "Right to Left" sliding set the value of the SlideDirection property to "Left".
    To enable "Top to Bottom" sliding set the value of the SlideDirection property to "Bottom".
    To enable "Bottom to Top" sliding set the value of the SlideDirection property to "Top".

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Splitter.SP_SlideDirection.DefaultCS" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <qsf:HeadTag id="Headtag1" runat="server"></qsf:HeadTag>
        </head>
        <body class="BODY">
            <form id="Form1" method="post" runat="server">
                <qsf:Header id="Header1" runat="server" navigationlanguage="c#"></qsf:Header>
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <div class="bigModule">
            <div class="bigModuleBottom">
                The top <b>RadSlidingZone</b> has the <b>SlideDirection</b> set to <b>Bottom</b>
                (this is by default when the Orientation of the <br />splitter is Horizontal).<br /><br />
                The bottom <b>RadSlidingZone</b> has the <b>SlideDirection</b> set to <b>Top</b>.<br />
                </div></div>
                            
                <br/>
                <telerik:RadSplitter id="Radsplitter2" runat="server" height="400" width="700" Orientation="Horizontal">
                    <telerik:RadPane id="Radpane1" runat="server" height="22" scrolling="none">
                        <telerik:RadSlidingZone id="Radslidingzone2" runat="server" height="22" SlideDirection="Bottom">
                            <telerik:RadSlidingPane id="Radslidingpane4" title="Pane1" runat="server" height="150">
                                Pane1</telerik:RadSlidingPane>
                            <telerik:RadSlidingPane id="Radslidingpane5" title="Pane2" runat="server" height="150">
                                Pane2</telerik:RadSlidingPane>
                            <telerik:RadSlidingPane id="Radslidingpane6" title="Pane3" runat="server" height="150">
                                Pane3</telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                    <telerik:RadSplitBar id="Radsplitbar3" runat="server"></telerik:RadSplitBar>
                    <telerik:RadPane id="Radpane2" runat="server">Main Pane</telerik:RadPane>
                    <telerik:RadSplitBar id="Radsplitbar4" runat="server"></telerik:RadSplitBar>
                    <telerik:RadPane id="Radpane3" runat="server" height="22" scrolling="none">
                        <telerik:RadSlidingZone id="Radslidingzone3" runat="server" height="22"
                            slidedirection="Top" DockedPaneId="Radslidingpane8">
                            <telerik:RadSlidingPane id="Radslidingpane7" title="Pane1" runat="server" height="150">
                                Pane1 </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane id="Radslidingpane8" title="Pane2" runat="server" height="150">
                                Pane2</telerik:RadSlidingPane>
                            <telerik:RadSlidingPane id="Radslidingpane9" title="Pane3" runat="server" height="150">
                                Pane3</telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                </telerik:RadSplitter>
                <br /><br />
            <div class="bigModule">
            <div class="bigModuleBottom">
                The left <b>RadSlidingZone</b> has the <b>SlideDirection</b> set to <b>Right</b>
                (this is by default when the Orientation of the <br />splitter is Vertical).<br />
                <br />
                Please note that the <strong>vertical</strong> tabs use proprietary text-direction styles, which are supported by Microsoft Internet Explorer only.
                </div></div>
                            
                <br/>
                <telerik:RadSplitter id="RadSplitter1" runat="server" height="200" width="700">
                    <telerik:RadPane id="LeftPane" runat="server" width="22" scrolling="none">
                        <telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22">
                            <telerik:RadSlidingPane id="Pane1" title="Pane1" runat="server" width="150">Pane1</telerik:RadSlidingPane>
                            <telerik:RadSlidingPane id="Pane2" title="Pane2" runat="server" width="150">Pane2</telerik:RadSlidingPane>
                            <telerik:RadSlidingPane id="Pane3" title="Pane3" runat="server" width="150">Pane3</telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                    <telerik:RadSplitBar id="RadSplitbar1" runat="server"></telerik:RadSplitBar>
                    <telerik:RadPane id="MiddlePane" runat="server">Main Pane</telerik:RadPane>
                    <telerik:RadSplitBar id="Radsplitbar2" runat="server"></telerik:RadSplitBar>
                    <telerik:RadPane id="EndPane" runat="server" width="22" scrolling="none">
                        <telerik:RadSlidingZone id="Radslidingzone1" runat="server" width="22" DockedPaneId="Radslidingpane2"
                            slidedirection="Left">
                            <telerik:RadSlidingPane id="Radslidingpane1" title="Pane1" runat="server" width="150">Pane1 </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane id="Radslidingpane2" title="Pane2" runat="server" width="150">Pane2</telerik:RadSlidingPane>
                            <telerik:RadSlidingPane id="Radslidingpane3" title="Pane3" runat="server" width="150">Pane3</telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                </telerik:RadSplitter>
                <qsf:Footer runat="server" id="Footer1"></qsf:Footer></form>
        </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451