Splitter - Click to Open

Enabled and Disabled ClickToOpen functionality

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

You can use the ClickToOpen property of the RadSlidingZone to control whether the panes will expand when the user clicks on the tab or on mouseover of a tab. This property can also be set from the client-side api thorought the "SetClickToOpen" method. For more info see the "Client Side API" example.

  • 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">
        <h2>Enabled and Disabled ClickToOpen 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" ClickToOpen="true">
                    <telerik:RadSlidingPane ID="Pane1" Title="Pane1" runat="server" Width="150" MinWidth="130">
                        1
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane2" Title="Pane2" runat="server" Width="150" MinWidth="130">
                        2
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane3" Title="Pane3" runat="server" Width="150" MinWidth="130">
                        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>

Find Assistance

Help Us Improve

Was this example helpful?