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

Client-side API

Pane1
Pane2
Pane3
  • Demo Configurator
  • SlidingZone
  • SlidingPane
Tab visibility
Opening panes
JSON
Manage Content
Dock / Undock

Set dock state of 'Pane 1'

Expand / Collapse Set expand state of 'Pane 1':
Resize

JSON

SlidingZone provides a flexible client-side API that allows you to easily change the configuration in the browser.

  1. Getting the RadSlidingZone client-side object:

    var slidingZone = $find("<%= RadSlidingZone1.ClientID %>");

  2. Once you get the client-side object of RadSlidingZone, you can use the getPaneById method to get the instance of a particular sliding pane. Example:

    var slidingZone = $find("<%= RadSlidingZone1.ClientID %>");
    var pane = slidingZone.getPaneById("RadPane1");

    You can also get the collection of all panes in the slidingZone using the getPanes method:

    var slidingZone = $find("<%= RadSlidingZone1.ClientID %>");
    var panes = slidingZone.getPanes(); // get the panes collection
     
    // loop the the collection
    for (var i = 0; i < panes.length; i++) {
        var paneObj = panes[i]; // get instance of the RadPane
    }

  3. Using the client-side API you can dock/undock, expand/collapse, show/hide, resize sliding panes. Examples:

    var slidingZone = $find("<%= RadSlidingZone1.ClientID %>");
    var panes = slidingZone.getPanes(); // get the panes collection
     
    // loop the the collection
    for (var i = 0; i < panes.length; i++) {
        var paneObj = panes[i]; // get instance of the RadPane
    }
  • DefaultCS.aspx
  • scripts.js
<%@ 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" />
    <script src="scripts.js" type="text/javascript"></script>
    <telerik:RadScriptBlock ID="RadSCriptBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            $splitterSZClientApiDemo.slizingZoneID = "<%=SlidingZone1.ClientID %>";
            $splitterSZClientApiDemo.pane1ID = "<%=Pane1.ClientID %>";
            $splitterSZClientApiDemo.pane2ID = "<%=Pane2.ClientID %>";
            $splitterSZClientApiDemo.VisibilityList = "<%=VisibilityList.ClientID %>";
            $splitterSZClientApiDemo.DockStateList = "<%=DockStateList.ClientID %>";
            //]]>
        </script>
    </telerik:RadScriptBlock>
    <div class="demo-container size-medium">
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="400" Width="590" VisibleDuringInit="false">
            <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None">
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22" ClickToOpen="true">
                    <telerik:RadSlidingPane ID="Pane1" runat="server" Title="Pane1" Width="150" MinWidth="130">
                        1
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane2" runat="server" Title="Pane2" Width="150" MinWidth="130">
                        2
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane3" runat="server" Title="Pane3" Width="150" MinWidth="130">
                        3
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Middle" runat="server">
            </telerik:RadPane>
            <telerik:RadPane ID="EndPane" runat="server" Width="300">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>

    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View Title="SlidingZone">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Tab visibility">
                    <asp:Label ID="VisibilityLbl" runat="server" Text="Manage 'Pane 2' visibility:" AssociatedControlID="VisibilityList"></asp:Label><br />
                    <qsf:RadioButtonList ID="VisibilityList" runat="server" AutoPostBack="false" Orientation="Horizontal" onclick="TogglePaneTabVisibility();">
                        <asp:ListItem Text="Show" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Hide"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Opening panes">
                    <asp:Label ID="ClickOnOpenLbl" runat="server" Text="Enable ClickOnOpen of SlidingZone" AssociatedControlID="ClickOnOpenList"></asp:Label><br />
                    <qsf:RadioButtonList ID="ClickOnOpenList" runat="server" AutoPostBack="false" Orientation="Horizontal" onchange="ToggleClickToOpen();">
                        <asp:ListItem Text="true" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="false"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium" Title="JSON">
                    <asp:Label ID="JsonLbl" runat="server" Text="Get SlidingZone state as JSON string:" AssociatedControlID="JsonBtn"></asp:Label><br />
                    <qsf:Button ID="JsonBtn" runat="server" Text="Get JSON" AutoPostBack="false" OnClientClicked="GetZoneState"></qsf:Button>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Medium" Title="Manage Content">
                    <asp:Label ID="ManageContentLbl" runat="server" Text="Change the content of 'Pane 1':" AssociatedControlID="ManageContentBtn"></asp:Label><br />
                    <qsf:Button ID="ManageContentBtn" runat="server" Text="Change Content" AutoPostBack="false" OnClientClicked="ChangePaneContent"></qsf:Button>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="SlidingPane">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn5" runat="server" Title="Dock / Undock" Size="Narrow">
                    <span class="checkbox">
                        <asp:CheckBox ID="EnableDockChkbx" Text="EnableDock of 'Pane 1'" runat="server" onclick="ToggleEnableDock();" Checked="true" /></span>
                    <span class="checkbox">
                        <asp:CheckBox ID="DockOnOpenChkbx" Text="Enable DockOnOpen of 'Pane 1'" runat="server" onclick="ToggleDockOnOpen();" /></span><br />
                    <qsf:RadioButtonList ID="DockStateList" runat="server" AutoPostBack="false" Label="Set dock state of 'Pane 1'"
                        Orientation="Horizontal" onclick="ToggleDockPane();">
                        <asp:ListItem Text="Dock"></asp:ListItem>
                        <asp:ListItem Text="Undock"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn6" runat="server" Title="Expand / Collapse" Size="Narrow">
                    <asp:Label ID="Label2" runat="server" Text="Set expand state of 'Pane 1':"></asp:Label><br />
                    <qsf:RadioButtonList ID="ExpandStateList" runat="server" AutoPostBack="false" onchange="ToggleExpandPane();">
                        <asp:ListItem Text="Expand"></asp:ListItem>
                        <asp:ListItem Text="Collapse" Selected="True"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn7" runat="server" Title="Resize" Size="Narrow">
                    <span class="checkbox">
                        <asp:CheckBox ID="EnableResizeChkbx" Text="EnableResize of 'Pane 1'" runat="server" onclick="ToggleEnableResize();" Checked="true" /></span><p></p>
                    <qsf:Button ID="ResizeBtn" runat="server" Text="Resize Pane1" AutoPostBack="false" OnClientClicked="ChangePaneWidth"></qsf:Button>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn8" runat="server" Size="Medium" Title="JSON">
                    <asp:Label ID="PaneJsonLbl" runat="server" Text="Get 'Pane 1' state as JSON string:" AssociatedControlID="PaneJsonBtn"></asp:Label><br />
                    <qsf:Button ID="PaneJsonBtn" runat="server" Text="Get JSON" AutoPostBack="false" OnClientClicked="GetPaneState"></qsf:Button>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance