Splitter - Scrolling Modes

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".
Isolate this demo as a stand-alone application

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.

<%@ 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-containers">
        <div class="demo-container size-narrow">
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="500px" 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>
        </div>
        <div class="demo-container size-narrow">
            <telerik:RadSplitter ID="RadSplitter2" runat="server" Width="500px" 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>
        </div>
        <div class="demo-container size-narrow">
            <telerik:RadSplitter ID="RadSplitter3" runat="server" Width="500px" 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>
        </div>
        <div class="demo-container size-narrow">
            <telerik:RadSplitter ID="RadSplitter4" runat="server" Width="500px" 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>
        </div>
        <div class="demo-container size-narrow">
            <telerik:RadSplitter ID="Radsplitter5" Height="150px" Width="500px" 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>
        </div>
        <div class="demo-container size-narrow">
            <telerik:RadSplitter ID="Radsplitter6" Height="150px" Width="500px" 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>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?