Splitter

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadSplitter - Telerik's ASP.NET Splitter

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
Configure RadSplitter
Splitter's Orientation:

Splitter's ResizeMode:


SlidingPane's resizing:

SplitBar's CollapseMode:



Locked Pane:
select


Set Pane's Background:

tlrk.it/18FcvCm To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/18FcvCm

About RadSplitter for ASP.NET AJAX

The Telerik Splitter 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 80+ 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.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Splitter demo, you can use the following path to find it in the sample website application:
splitter/examples/overview

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

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Splitter.Overview.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Splitter/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>
    <title>ASP.NET Splitter Demo | RadSplitter</title>
     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
     <style type="text/css">
        #<%= UpdatePanel1.ClientID %> {
               width: 654px;
               height: 514px;
               float: left;
               background-image:url(./img/border.jpg);
               }
    </style>
     </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:RadScriptBlock ID="RadSCriptBlock1" runat="server">
          <script type="text/javascript">
               function RadSplitter1_OnClientLoad(splitter, args) {
                    var indexes = $telerik.$(".indexes");

                    indexes.each(function (i) {
                         $telerik.$(this).click(function () {
                              var contentPane = getContentPane(splitter);
                              var pageNo = $telerik.$(this).text();

                              var scrollValue = 750 * (pageNo - 1); //750 is the height of a 'page'
                              contentPane.setScrollPos(0, scrollValue);
                         })
                    })
               }

               function FontSizeSlider_OnClientValueChanged(slider, args) {
                    var targetPane = getContentPane();

                    targetPane.get_element().style.fontSize = slider.get_value() + "px";
               }

               function FontColorPicker_OnClientColorChange(colorPicker, args) {
                    var targetPane = getContentPane();

                    targetPane.get_element().style.color = colorPicker.get_selectedColor();
               }

               function BackgroundColorPicker_OnClientColorChange(colorPicker, args) {
                    var pages = $telerik.$(".pages");
                    pages.each(function (i) {
                         pages[i].style.backgroundColor = colorPicker.get_selectedColor();
                    });
               }
               
               function getSplitter() { return $find("<%=RadSplitter1.ClientID %>"); }
               function getContentPane(splitter) { return (splitter || getSplitter()).getPaneById("<%=RadPane2.ClientID %>"); }

          </script>
     </telerik:RadScriptBlock>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
          <ContentTemplate>
               <div class="splitterWrapper">
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="640px" Height="500px"
                         Orientation="Vertical" OnClientLoad="RadSplitter1_OnClientLoad">
                         <telerik:RadPane ID="RadPane1" runat="server" Width="22px" BackColor="#698ebe">
                              <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">
                                   <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Width="225px" Title="Decorate Pages"
                                        EnableDock="false" MinWidth="225" MinHeight="225">
                                        <div class="colorPickerWrapper">
                                             <strong>Set Content's Font-Color</strong>
                                             <br />
                                             <telerik:RadColorPicker ID="FontColorPicker" Width="165px" 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 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 ID="BackgroundColorPicker" Width="165px" 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>
          </ContentTemplate>
          <Triggers>
               <asp:AsyncPostBackTrigger ControlID="RadioButtonListOrientation"></asp:AsyncPostBackTrigger>
               <asp:AsyncPostBackTrigger ControlID="RadioButtonListCollapseMode"></asp:AsyncPostBackTrigger>
               <asp:AsyncPostBackTrigger ControlID="RadioButtonListSlidingPaneResizing"></asp:AsyncPostBackTrigger>
               <asp:AsyncPostBackTrigger ControlID="RadComboBoxLockedPanes"></asp:AsyncPostBackTrigger>
               <asp:AsyncPostBackTrigger ControlID="PanesBackgroundColorPicker"></asp:AsyncPostBackTrigger>
          </Triggers>
     </asp:UpdatePanel>
     <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Configure RadSplitter"
          Expanded="true" Style="text-align: left; float: left; clear: right;  margin-left: 20px; margin-bottom: 20px;" HorizontalAlign="Right"
          Width="200">
          <asp:UpdatePanel ID="UpdatePanel2" runat="server">
               <ContentTemplate>
                    <strong>Splitter's Orientation:</strong>
                    <asp:RadioButtonList ID="RadioButtonListOrientation" runat="server" AutoPostBack="true"
                         OnSelectedIndexChanged="RadioButtonListOrientation_SelectedIndexChanged">
                         <asp:ListItem Text="Vertical" Value="Vertical" Selected="True"></asp:ListItem>
                         <asp:ListItem Text="Horizontal" Value="Horizontal"></asp:ListItem>
                    </asp:RadioButtonList>
                    <br />
                    <strong>Splitter's ResizeMode:</strong>
                    <asp:RadioButtonList ID="RadioButtonListResizeMode" runat="server" AutoPostBack="true"
                         OnSelectedIndexChanged="RadioButtonListResizeMode_SelectedIndexChanged">
                         <asp:ListItem Text="AdjacentPane" Value="AdjacentPane" Selected="True"></asp:ListItem>
                         <asp:ListItem Text="Proportional" Value="Proportional"></asp:ListItem>
                         <asp:ListItem Text="EndPane" Value="EndPane"></asp:ListItem>
                    </asp:RadioButtonList>
                    <br />
                    <strong>SlidingPane's resizing:</strong>
                    <asp:RadioButtonList ID="RadioButtonListSlidingPaneResizing" runat="server" AutoPostBack="true"
                         OnSelectedIndexChanged="RadioButtonListSlidingPaneResizing_SelectedIndexChanged">
                         <asp:ListItem Text="Enabled" Value="Enabled" Selected="True"></asp:ListItem>
                         <asp:ListItem Text="Disabled" Value="Disabled"></asp:ListItem>
                    </asp:RadioButtonList>
                    <br />
                    <strong>SplitBar's CollapseMode:</strong>
                    <asp:RadioButtonList ID="RadioButtonListCollapseMode" runat="server" AutoPostBack="true"
                         OnSelectedIndexChanged="RadioButtonListCollapseMode_SelectedIndexChanged">
                         <asp:ListItem Text="None" Value="None" Selected="True"></asp:ListItem>
                         <asp:ListItem Text="Both" Value="Both"></asp:ListItem>
                         <asp:ListItem Text="Forward" Value="Forward"></asp:ListItem>
                         <asp:ListItem Text="Backward" Value="Backward"></asp:ListItem>
                    </asp:RadioButtonList>
                    <br />
                    <strong>Locked Pane:</strong>
                    <telerik:RadComboBox ID="RadComboBoxLockedPanes" runat="server" AutoPostBack="true"
                         OnSelectedIndexChanged="RadComboBoxLockedPanes_SelectedIndexChanged">
                         <Items>
                              <telerik:RadComboBoxItem Text="None" Value="None"></telerik:RadComboBoxItem>
                              <telerik:RadComboBoxItem Text="First Pane" Value="RadPane1"></telerik:RadComboBoxItem>
                              <telerik:RadComboBoxItem Text="Second Pane" Value="RadPane2"></telerik:RadComboBoxItem>
                              <telerik:RadComboBoxItem Text="Last Pane" Value="RadPane3"></telerik:RadComboBoxItem>
                         </Items>
                    </telerik:RadComboBox>
                    <br />
                    <br />
                    <strong>Set Pane's Background:</strong>
                    <telerik:RadColorPicker ID="PanesBackgroundColorPicker" Width="165px" AutoPostBack="true"
                         runat="server" Style="float: left;" PaletteModes="WebPalette" Preset="Standard"
                         OnColorChanged="PanesBackgroundColorPicker_ColorChanged" ShowEmptyColor="false"
                         PreviewColor="false">
                    </telerik:RadColorPicker>
               </ContentTemplate>
          </asp:UpdatePanel>
     </qsf:ConfiguratorPanel>
     <div class="qsf-overview-qr" style="clear: both;">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Splitter.png" AlternateText="tlrk.it/18FcvCm" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/18FcvCm">tlrk.it/18FcvCm</a>
    </div>
    </form>
</body>
</html>