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

Splitter Orientation

Vertical Orientation

Left Pane
Right Pane

Horizontal Orientation

Top Pane
Bottom Pane
RadSplitter can order the panes horizontally or vertically. You can specify how the panes are ordered using the Orientation property of the RadSplitter control. The property has two values:
  • Vertical - default - the panes are ordered vertically side by side
  • Horizontal - the panes are ordered horizontally side by side
  • 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>
            Vertical Orientation
        </h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="300" Width="795">
            <telerik:RadPane ID="navigationPane" runat="server" Width="150">
                Left Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="contentPane" runat="server">
                Right Pane
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>

    <div class="demo-container size-wide">
        <h2>
            Horizontal Orientation
        </h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter3" runat="server" Height="300" Width="795" Orientation="Horizontal">
            <telerik:RadPane ID="Radpane4" runat="server">
                Top Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar4" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane5" runat="server">
                Bottom Pane
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance