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

Initial State

Pane1
Pane2
Pane3
Main Pane

You can set the pane to be docked when the page is loaded using the DockedPaneId property of the RadSlidingZone control.

If you need the pane to be only expanded, but not docked use the ExpandedPaneId property of the RadSlidingZone control.

  • 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">
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="400" Width="800">
            <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None">
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22" DockedPaneId="Pane1"
                    ExpandedPaneId="Pane2">
                    <telerik:RadSlidingPane ID="Pane1" Title="Pane1" runat="server" Width="300" MinWidth="130">
                        This pane is set to be initially docked when the page is loaded.
                    <br />
                        <br />
                        Use the <strong>DockedPaneId</strong> property of the <strong>RadSlidingZone</strong> to control this
                    behavior.
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane2" Title="Pane2" runat="server" Width="150" MinWidth="130">
                        This pane is set to be initially expanded when the page is loaded.
                    <br />
                        <br />
                        Use the <strong>ExpandedPaneId</strong> property of the <strong>RadSlidingZone</strong> to control this
                    behavior.
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane3" Title="Pane3" runat="server" Width="150" MinWidth="130">
                        This pane has the default behavior and is hidden on page load.
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="MainPane" runat="server">
                Main Pane
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance