Splitter - Sliding Panes/First Look

Pane1
Pane2
Pane3
Pane1
Pane2
Pane3
Pane1
 
 
 
Pane1
Pane2
 
 
 
Pane2
Pane3
 
 
 
Pane3

RadSplitter

RadSplitter also creates separate regions for displaying content to users. Unlike RadWindow and RadDock, however, the content regions that RadSplitter uses are not pop-up windows. Instead, they are resizable frames, called panes, that divide up a region of the Web page. The splitter can be configured to lay out its panes either horizontally or vertically. By adding split bars between the panes, you can enable the user to resize panes in the browser. Alternately, you can leave out the split bars, to create a static layout of separate panes on your Web page. In a splitter that contains split bars, individual panes can be "locked", so that they are not resizable along with the other panes of the splitter.

Panes can display content from an external URL, like RadWindow, or content that is loaded with the Web page, like RadDock. The screenshot below shows a splitter that displays a radio button list that is loaded with the Web page in the left pane, and content from an external Web site in the right pane:

Panes that load their content with the Web page can hold any HTML elements, even another splitter. By nesting splitters with alternating horizontal and vertical orientations, you can create arbitrarily complex layouts.

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

RadSlidingZone and RadSlidingPane controls give you the ability to define sliding panes in your splitter control. Sliding panes are used to greatly optimize the layout of your page.

By defining sliding panes in the sliding zone container you can initially hide the content that your users do not need to see all the time.

By clicking on the pane tab the content of the pane is displayed. Then user can dock the content in the page layout if the content should be visible all the time.

The Sliding zone also provides you with the ability to initially show the pane content (through its DockedPaneId and ExpandedPaneId properties).

By providing a flexible client side model you can easily develop your custom application.

For more details on handling client events, review the client events section.

Instructions

Mouseover the left/top tabstrips and click on the tabs of the right one to open the hidden sliding panes.

  • 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" Width="800" Height="500">
        <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none">
            <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px">
                <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Pane1" runat="server" Width="150px"
                    MinWidth="130">
                    Pane 1 Content
                </telerik:RadSlidingPane>
                <telerik:RadSlidingPane ID="Radslidingpane2" Title="Pane2" runat="server" Width="150px"
                    MinWidth="130">
                    Pane 2 Content
                </telerik:RadSlidingPane>
                <telerik:RadSlidingPane ID="Radslidingpane3" Title="Pane3" runat="server" Width="150px"
                    MinWidth="130">
                    Pane 3 Content
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="Radsplitbar1" runat="server">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None">
            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">
                <telerik:RadPane ID="Radpane1" runat="server" Height="22px" Scrolling="none">
                    <telerik:RadSlidingZone ID="Radslidingzone2" runat="server" Height="22px" SlideDirection="Bottom">
                        <telerik:RadSlidingPane ID="Radslidingpane4" Title="Pane1" runat="server" Height="150px">
                            Pane1</telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="Radslidingpane8" Title="Pane2" runat="server" Height="150px">
                            Pane2</telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="Radslidingpane9" Title="Pane3" runat="server" Height="150px">
                            Pane3</telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar3" runat="server">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane2" runat="server">
                    <div style="padding: 5px">
                        <h2>
                            RadSplitter
                        </h2>
                        <p>
                            RadSplitter also creates separate regions for displaying content to users. Unlike
                            RadWindow and RadDock, however, the content regions that RadSplitter uses are not
                            pop-up windows. Instead, they are resizable frames, called panes, that divide up
                            a region of the Web page. The splitter can be configured to lay out its panes either
                            horizontally or vertically. By adding split bars between the panes, you can enable
                            the user to resize panes in the browser. Alternately, you can leave out the split
                            bars, to create a static layout of separate panes on your Web page. In a splitter
                            that contains split bars, individual panes can be "locked", so that they are not
                            resizable along with the other panes of the splitter.
                        </p>
                        <p>
                            Panes can display content from an external URL, like RadWindow, or content that
                            is loaded with the Web page, like RadDock. The screenshot below shows a splitter
                            that displays a radio button list that is loaded with the Web page in the left pane,
                            and content from an external Web site in the right pane:
                        </p>
                        <p>
                            Panes that load their content with the Web page can hold any HTML elements, even
                            another splitter. By nesting splitters with alternating horizontal and vertical
                            orientations, you can create arbitrarily complex layouts.
                        </p>
                        <img src="../Overview/images/pic1.jpg" height="300px" alt="" />
                    </div>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar2" runat="server">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None">
            <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" ClickToOpen="true"
                SlideDirection="Left">
                <telerik:RadSlidingPane ID="Radslidingpane5" Title="Pane1" runat="server" Width="150px"
                    MinWidth="130">
                    Pane 1 Content
                </telerik:RadSlidingPane>
                <telerik:RadSlidingPane ID="Radslidingpane6" Title="Pane2" runat="server" Width="150px"
                    MinWidth="130">
                    Pane 2 Content
                </telerik:RadSlidingPane>
                <telerik:RadSlidingPane ID="Radslidingpane7" Title="Pane3" runat="server" Width="150px"
                    MinWidth="130">
                    Pane 3 Content
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
    </telerik:RadSplitter>
        </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?