New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Slide Direction

Top and Bottom Sliding Direction

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

Left and Right Sliding Direction

Pane1
Pane2
Pane3
Main Pane
Pane1
Pane2
Pane3

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"

The examples above demonstrates the behavior of all sliding directions. The top RadSlidingZone of the first Splitter has SlideDirection set to Bottom (this is by default when the Orientation of the splitter is Horizontal), while the bottom RadSlidingZone has SlideDirection set to Top.

  • DefaultCS.aspx
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <h2>Top and Bottom Sliding Direction</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter2" runat="server" Height="400" Width="800" 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>
    </div>
    <div class="demo-container size-wide">
        <h2>Left and Right Sliding Direction</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="200" Width="800">
            <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" MinWidth="100">
                        Pane1
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane2" Title="Pane2" runat="server" Width="150" MinWidth="100">
                        Pane2
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane3" Title="Pane3" runat="server" Width="150" MinWidth="100">
                        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"
                        MinWidth="100">
                        Pane1
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane2" Title="Pane2" runat="server" Width="150"
                        MinWidth="100">
                        Pane2
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane3" Title="Pane3" runat="server" Width="150"
                        MinWidth="100">
                        Pane3
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance