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.

Splitter - Scrolling Modes

Examine the difference in the behavior of the RadPane object with different values of the Scrolling property.

Left Pane
telerik wins 7 aspnetPRO Readers Choice Awards

Telerik is pleased to announce that its products have been recognized with seven of the 2006 aspnetPRO Readers Choice Awards. teleriks component suite for ASP.NET development, as well as six individual products seized winner and runner-up prizes in their respective categories.

The Left Pane has Scrolling="Both" (default).

Left Pane
telerik wins 7 aspnetPRO Readers Choice Awards

Telerik is pleased to announce that its products have been recognized with seven of the 2006 aspnetPRO Readers Choice Awards. teleriks component suite for ASP.NET development, as well as six individual products seized winner and runner-up prizes in their respective categories.

The Left Pane has Scrolling="None".
Left Pane
telerik wins 7 aspnetPRO Readers Choice Awards

Telerik is pleased to announce that its products have been recognized with seven of the 2006 aspnetPRO Readers Choice Awards. teleriks component suite for ASP.NET development, as well as six individual products seized winner and runner-up prizes in their respective categories.

The Left Pane has Scrolling="Y".

Left Pane
telerik wins 7 aspnetPRO Readers Choice Awards

Telerik is pleased to announce that its products have been recognized with seven of the 2006 aspnetPRO Readers Choice Awards. teleriks component suite for ASP.NET development, as well as six individual products seized winner and runner-up prizes in their respective categories.

The Left Pane has Scrolling="X".
The Left Pane has Scrolling="Both" (default) and ContentUrl=
"http://www.telerik.com".

The Left Pane has Scrolling="None" and ContentUrl=
"http://www.telerik.com".

Scrolling modes

The RadSplitter pane control allows you to define its behavior whenever the content of a RadSplitter pane exceeds its size. There are 4 Scrolling modes defined:

  • Both - default - when this Scrolling mode is used, the RadSplitter pane displays both vertical and herizontal scrollbars when the size of the content of the RadPane exceeds the size of the RadPane itself
  • None - the RadSplitter pane never displays scrollbars
  • Y - only the vertical scrollbar is displayed when the height of the content of the RadPane exceeds the height of the RadPane itself
  • X - only the horizontal scrollbar is displayed when the width of the content of the RadPane exceeds the width of the RadPane itself
The Scrolling property also affects the behavior of the RadSplitter pane when the ContentUrl property is set. In this case, you can either have scrollbars or not. Therefore if you use the ContentUrl property, X, Y and Both values of the Scrolling property define one and the same bahavior of the RadPane, as you will get both horizontal and vertical scrollbars.

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" AutoEventWireup="false"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 - Scrolling Modes</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <p>
          Examine the difference in the behavior of the RadPane object with different values
          of the <strong>Scrolling</strong> property.</p>
     <table style="width: 750px">
          <tr>
               <td>
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="340px" Height="150px">
                         <telerik:RadPane ID="RadPane1_1" runat="server" Width="160px">
                              <table style="width: 200px; height: 300px">
                                   <tr>
                                        <td>
                                             Left Pane
                                        </td>
                                   </tr>
                                   <tr>
                                        <td>
                                             <strong>telerik wins 7 aspnetPRO Readers Choice Awards</strong>
                                             <p>
                                                  Telerik is pleased to announce that its products have been recognized with seven
                                                  of the <a href="http://www.aspnetpro.com/NewsletterArticle/2006/06/asp200606dr_l/asp200606dr_l.asp">
                                                       2006 aspnetPRO Readers Choice Awards</a>. teleriks component suite for ASP.NET
                                                  development, as well as six individual products seized winner and runner-up prizes
                                                  in their respective categories.</p>
                                        </td>
                                   </tr>
                              </table>
                         </telerik:RadPane>
                         <telerik:RadSplitBar ID="RadSplitbar1_1" runat="server">
                         </telerik:RadSplitBar>
                         <telerik:RadPane ID="RadPane1_2" runat="server">
                              The Left Pane has Scrolling="<strong>Both</strong>" (default).
                         </telerik:RadPane>
                    </telerik:RadSplitter>
               </td>
               <td style="width: 25px">
                    <br />
               </td>
               <td>
                    <telerik:RadSplitter ID="RadSplitter2" runat="server" Width="340px" Height="150px">
                         <telerik:RadPane ID="RadPane2_1" runat="server" Width="160px" Scrolling="None">
                              <table style="width: 200px; height: 300px">
                                   <tr>
                                        <td>
                                             Left Pane
                                        </td>
                                   </tr>
                                   <tr>
                                        <td>
                                             <strong>telerik wins 7 aspnetPRO Readers Choice Awards</strong>
                                             <p>
                                                  Telerik is pleased to announce that its products have been recognized with seven
                                                  of the <a href="http://www.aspnetpro.com/NewsletterArticle/2006/06/asp200606dr_l/asp200606dr_l.asp">
                                                       2006 aspnetPRO Readers Choice Awards</a>. teleriks component suite for ASP.NET
                                                  development, as well as six individual products seized winner and runner-up prizes
                                                  in their respective categories.</p>
                                        </td>
                                   </tr>
                              </table>
                         </telerik:RadPane>
                         <telerik:RadSplitBar ID="RadSplitbar2_1" runat="server">
                         </telerik:RadSplitBar>
                         <telerik:RadPane ID="RadPane2_2" runat="server">
                              The Left Pane has Scrolling="<strong>None</strong>".
                         </telerik:RadPane>
                    </telerik:RadSplitter>
               </td>
          </tr>
          <tr>
               <td style="height: 20px">
               </td>
          </tr>
          <tr>
               <td>
                    <telerik:RadSplitter ID="RadSplitter3" runat="server" Width="340px" Height="150px">
                         <telerik:RadPane ID="RadPane3_1" runat="server" Width="160px" Scrolling="Y">
                              <table style="width: 200px; height: 300px">
                                   <tr>
                                        <td>
                                             Left Pane
                                        </td>
                                   </tr>
                                   <tr>
                                        <td>
                                             <strong>telerik wins 7 aspnetPRO Readers Choice Awards</strong>
                                             <p>
                                                  Telerik is pleased to announce that its products have been recognized with seven
                                                  of the <a href="http://www.aspnetpro.com/NewsletterArticle/2006/06/asp200606dr_l/asp200606dr_l.asp">
                                                       2006 aspnetPRO Readers Choice Awards</a>. teleriks component suite for ASP.NET
                                                  development, as well as six individual products seized winner and runner-up prizes
                                                  in their respective categories.</p>
                                        </td>
                                   </tr>
                              </table>
                         </telerik:RadPane>
                         <telerik:RadSplitBar ID="RadSplitbar3_1" runat="server">
                         </telerik:RadSplitBar>
                         <telerik:RadPane ID="RadPane3_2" runat="server">
                              The Left Pane has Scrolling="<strong>Y</strong>".
                         </telerik:RadPane>
                    </telerik:RadSplitter>
               </td>
               <td style="width: 25px">
                    <br />
               </td>
               <td>
                    <telerik:RadSplitter ID="RadSplitter4" runat="server" Width="340px" Height="150px">
                         <telerik:RadPane ID="RadPane4_1" runat="server" Width="160px" Scrolling="X">
                              <table style="width: 200px; height: 300px">
                                   <tr>
                                        <td>
                                             Left Pane
                                        </td>
                                   </tr>
                                   <tr>
                                        <td>
                                             <strong>telerik wins 7 aspnetPRO Readers Choice Awards</strong>
                                             <p>
                                                  Telerik is pleased to announce that its products have been recognized with seven
                                                  of the <a href="http://www.aspnetpro.com/NewsletterArticle/2006/06/asp200606dr_l/asp200606dr_l.asp">
                                                       2006 aspnetPRO Readers Choice Awards</a>. teleriks component suite for ASP.NET
                                                  development, as well as six individual products seized winner and runner-up prizes
                                                  in their respective categories.</p>
                                        </td>
                                   </tr>
                              </table>
                         </telerik:RadPane>
                         <telerik:RadSplitBar ID="RadSplitbar4_1" runat="server">
                         </telerik:RadSplitBar>
                         <telerik:RadPane ID="RadPane4_2" runat="server">
                              The Left Pane has Scrolling="<strong>X</strong>".
                         </telerik:RadPane>
                    </telerik:RadSplitter>
               </td>
          </tr>
          <tr>
               <td style="height: 20px">
               </td>
          </tr>
          <tr>
               <td>
                    <telerik:RadSplitter ID="Radsplitter5" Height="150px" Width="340px" runat="server">
                         <telerik:RadPane ID="Radpane5_1" runat="server" Width="160px" ContentUrl="http://www.telerik.com">
                         </telerik:RadPane>
                         <telerik:RadSplitBar ID="Radsplitbar5_1" runat="server">
                         </telerik:RadSplitBar>
                         <telerik:RadPane ID="Radpane5_2" runat="server">
                              The Left Pane has Scrolling="<strong>Both</strong>" (default) and ContentUrl=<br />
                              "http://www.telerik.com".
                         </telerik:RadPane>
                    </telerik:RadSplitter>
               </td>
               <td style="width: 25px">
                    <br />
               </td>
               <td>
                    <telerik:RadSplitter ID="Radsplitter6" Height="150px" Width="340px" runat="server">
                         <telerik:RadPane ID="Radpane6_1" runat="server" Width="160px" Scrolling="None" ContentUrl="http://www.telerik.com">
                         </telerik:RadPane>
                         <telerik:RadSplitBar ID="Radsplitbar6_1" runat="server">
                         </telerik:RadSplitBar>
                         <telerik:RadPane ID="Radpane6_2" runat="server">
                              The Left Pane has Scrolling="<strong>None</strong>" and ContentUrl=<br />
                              "http://www.telerik.com".
                         </telerik:RadPane>
                    </telerik:RadSplitter>
               </td>
          </tr>
     </table>
    </form>
</body>
</html>