Splitter - Initial State

Pane1
Pane2
Pane3
Main Pane
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 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">
    <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>

Find Assistance

Help Us Improve

Was this example helpful?