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

Dock on Open

Enabled and Disabled DockOnOpen functionality

Pane1
Pane2
Pane3
Middle Pane
Pane1
Pane2
Pane3

You can use the DockOnOpen property of the RadSlidingPane to control whether the pane should automatically dock on expand or not. This property can also be set from the client-side api thorought the "set_dockOnOpen" method. For more info see the "Client Side API" example.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Splitter.SP_DockOnOpen.DefaultVB" %>

<!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>Enabled and Disabled DockOnOpen functionality</h2>
        <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">
                    <telerik:RadSlidingPane ID="Pane1" Title="Pane1" runat="server" Width="150" MinWidth="130"
                        DockOnOpen="true">
                        1
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane2" Title="Pane2" runat="server" Width="150" MinWidth="130"
                        DockOnOpen="true">
                        2
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane3" Title="Pane3" runat="server" Width="150" MinWidth="130"
                        DockOnOpen="true">
                        3
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="MiddlePane" runat="server">
                Middle 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" ClickToOpen="false"
                    SlideDirection="Left">
                    <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Pane1" runat="server" Width="150"
                        MinWidth="130">
                        1
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="RadSlidingPane2" Title="Pane2" runat="server" Width="150"
                        MinWidth="130">
                        2
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="RadSlidingPane3" Title="Pane3" runat="server" Width="150"
                        MinWidth="130">
                        3
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance