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

WebForms Splitter Overview

Decorate Pages

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.




RadSlidingZone


RadSlidingZone is a specialized control for optimizing layout that can only be placed directly inside the pane of a splitter. RadSlidingZone implements a set of tabs that can be used to slide out additional panes, called sliding panes, similar to the way Visual Studio lets you slide out panels such as the Properties Window or Solution Explorer. Like the sliding panels in Visual Studio, the sliding panes of a RadSlidingZone control can be docked in place by the user. By defining sliding panes in a sliding zone container, you can initially hide content that your users do not need to see all the time.

You can configure the orientation of the sliding zone and whether sliding panes expand when the user moves the mouse over their tabs or whether the user must click on a tab to expand it. Individual tabs can be configured to display text, an icon, or both. Sliding panes can be fixed in size, or resizable in the direction that they expand. You can also suppress the ability of the user to dock individual sliding panes.




Getting Started

In this walk-through you will become familiar with the following "real estate" controls:

  • RadDockZone and RadDock
  • RadSplitter, RadPane, and RadSplitBar
  • RadWindowManager and RadWindow

These controls will be used to generate the layout shown in the following screen shot:




Set up the project structure

  1. Create a new ASP.NET Web Application.
  2. Drag a ScriptManager from the Tool Box onto the Web page.



Add the RadSplitter controls

  1. Drag a RadSplitter control from the Tool Box onto the right-hand cell of the table.
  2. Using the Smart Tag, set its Skin property to "Outlook".
  3. Using the Properties Window, set the Orientation property to "Horizontal" and the Width to "100%"
  4. Drag a RadPane control from the Tool Box onto the surface of the RadSplitter. Set its Height property to "75px".
  5. Drag a LinkButton from the Tool Box onto the surface of the RadPane control. Set its Text property to "Telerik".
  6. Hit the Enter key to add a line break after the link button, and add a second LinkButton below the first. Set this one's Text property to "Google".
  7. Hit the Enter key again and add a third LinkButton. Set its Text property to "Wikipedia".
  8. Drag a RadSplitBar control from the Tool Box onto the surface of the RadSplitter, below the RadPane you just filled. This can be a little tricky, so feel free to use the Source view to move it into place if you need to.
  9. Drag a second RadPane control onto the RadSplitter. Once again, this can be a bit tricky, so check in the Source view to make sure that it landed in the right place. At this point, your RadSplitter declaration should look like the following:
[ASP.NET] RadSplitter declaration
< telerik:RadSplitter ID = "RadSplitter2" runat = "server" Orientation = "Horizontal" Skin = "Outlook"
     Width = "100%" >
     < telerik:RadPane ID = "RadPane2" runat = "server" Height = "75px" >
         < asp:linkbutton id = "LinkButton1" runat = "server" >Telerik</ asp:linkbutton >
         < br />
         < asp:linkbutton id = "LinkButton2" runat = "server" >Google</ asp:linkbutton >
         < br />
         < asp:linkbutton id = "LinkButton3" runat = "server" >Wikipedia</ asp:linkbutton >
     </ telerik:RadPane >
     < telerik:RadSplitBar ID = "RadSplitBar3" runat = "server" />
     < telerik:RadPane ID = "RadPane3" runat = "server" >
     </ telerik:RadPane >
</ telerik:RadSplitter >



Add the RadWindowManager and RadWindow controls

  1. Drag a RadWindowManager control from the Tool Box and place it at the bottom of the Web page.
  2. Using the Properties Window, set the Skin property to "Outlook".
  3. Press the ellipsis button next to the Windows property to bring up the RadWindow Collection Editor.
  4. In the Collection Editor, click the Add button to add a RadWindow to the RadWindowManager's Windows collection.
  5. Assign the following properties to the new window you just added:
    • Set Animation to "Fade".
    • Set Behaviors to "Resize, Minimize, Close, Maximize, Move, Reload".
    • Set OpenerElementID to "LinkButton1".
    • Set Title to "Telerik".
    • Set VisibleStatusBar to false.
    • Set NavigateUrl to "http://www.telerik.com". As before, be sure to include the entire URL.
  1. Click the Add button again to add a second RadWindow to the collection. Set the following properties:
    • Set Animation to "FlyIn".
    • Set Behaviors to "Resize, Minimize, Close, Maximize, Move, Reload".
    • Set OpenerElementID to "LinkButton2".
    • Set Title to "Google".
    • Set VisibleStatusBar to false.
    • Set NavigateUrl to "http://www.google.com".
  2. Click the Add button again to add a third RadWindow to the collection. Set the following properties:
    • Set Animation to "Resize".
    • Set Behaviors to "Resize, Minimize, Close, Maximize, Move, Reload".
    • Set OpenerElementID to "LinkButton3".
    • Set Title to "Wikipedia".
    • Set VisibleStatusBar to false.
    • Set NavigateUrl to "http://www.wikipedia.org".
  3. Click Ok to exit the collection editor.
  • 1
  • 2
  • 3
  • 4
  • 5
  • Demo Configurator
  • Splitter
  • Pane
  • SlidingPane
  • SplitBar
Splitter's Orientation
Splitter's Resize Mode:
Locked Pane:
None
Pane's Background:
Pick Color(Current Color is blank)
SlidingPane's resizing:
SplitBar's Collapse Mode:
Telerik RadSplitter is a flexible UI component for building powerful ASP.NET applications and allows users manage effectively the size and the layout of their page content. Layouts can be conveniently enhanced with sliding panes, dockable panels, resizable areas and many more splitter elements just as in Visual Studio but boosted with ASP.NET AJAX capabilities.

About RadSplitter for ASP.NET AJAX

RadSplitter control for ASP.NET AJAX provides a clean and elegant way to separate content within your Web application. Control the layout of your UIs with multiple resizable areas and sliding, expand/collapse capabilities, dockable panels just like in Visual Studio .Net. Each layout can be indefinitely nested with splitters, whose state is automatically persisted on the server and can be saved/loaded through the extensive API.

RadSplitter and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Entirely based on ASP.NET AJAX, leveraging its client-side programming model
  • Resizable panels - A key feature of RadSplitter is the easy implementation of resizable panels, similar to frames
  • Unlimited nesting - RadSplitter allows for unlimited nesting of panels, which is appropriate for more complex interfaces
  • Sliding panes - You can add sliding zones and panes to simulate Visual Studio .NET user interface
  • Horizontal/Vertical splitter orientation - Nest splitters to get any orientation combination
  • Full cross-browser compatibility - for Internet Explorer, Firefox, Chrome, Safari, and Opera on Windows, Mac OS and Linux
  • XHTML 1.1 compliance
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
  • PageContent.xml
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Splitter.Overview.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</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[
            $splitterOverviewDemo.paneID = "<%= RadPane2.ClientID %>";
            //]]>
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Configuratorpanel1" UpdatePanelHeight="100%" />
                    <telerik:AjaxUpdatedControl ControlID="RadSplitter1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server"></telerik:RadAjaxLoadingPanel>
    <div class="demo-container size-custom">
        <div class="wrapper">
            <div class="splitterWrapper">
                <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Width="640px" Height="500px"
                    Orientation="Vertical" OnClientLoad="radSplitter1_OnClientLoad">
                    <telerik:RadPane ID="RadPane1" runat="server" Width="22px" >
                        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="22px">
                            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Width="290px" Title="Decorate Pages"
                                EnableDock="false" MinWidth="225" MinHeight="225">
                                <div class="colorPickerWrapper">
                                    <strong>Set Content's Font-Color</strong>
                                    <br />
                                    <telerik:RadColorPicker RenderMode="Lightweight" ID="FontColorPicker" Width="262px" Preset="Standard" runat="server"
                                        Style="float: left;" OnClientColorChange="fontColorPicker_OnClientColorChange"
                                        PaletteModes="WebPalette">
                                    </telerik:RadColorPicker>
                                </div>
                                <div class="fontSizeSliderDecorator">
                                    <strong>Change Text Font-Size</strong>
                                    <br />
                                    <telerik:RadSlider RenderMode="Lightweight" ID="FontSizeSlider" runat="server" MinimumValue="12" MaximumValue="24"
                                        Width="165px" OnClientValueChanged="fontSizeSlider_OnClientValueChanged">
                                    </telerik:RadSlider>
                                </div>
                                <div class="colorPickerWrapper">
                                    <strong>Set Background-Color</strong>
                                    <br />
                                    <telerik:RadColorPicker RenderMode="Lightweight" ID="BackgroundColorPicker" Width="262px" runat="server" Style="float: left;"
                                        OnClientColorChange="backgroundColorPicker_OnClientColorChange" Preset="Standard"
                                        PaletteModes="WebPalette" ShowEmptyColor="false">
                                    </telerik:RadColorPicker>
                                </div>
                            </telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar2" runat="server">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="RadPane2" CssClass="contentPaneDecorator" runat="server">
                        <asp:Literal ID="contentHolder" runat="server"></asp:Literal>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="RadPane3" CssClass="contentPaneDecorator" runat="server" Width="50px"
                        MinWidth="50" MinHeight="50">
                        <ul id="indexesList" runat="server" class="verticalIndexes">
                            <li class="indexes">1</li>
                            <li class="indexes">2</li>
                            <li class="indexes">3</li>
                            <li class="indexes">4</li>
                            <li class="indexes">5</li>
                            <li class="clear"></li>
                        </ul>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </div>
        </div>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance