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

Click to Open

Enabled and Disabled ClickToOpen functionality

Pane1
Pane2
Pane3
Middle Pane
Pane1
Pane2
Pane3

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

Support & Learning Resources

Find Assistance