Splitter - Nested Splitters

ResizeWithParentPane="true"

Left Pane
Nested Splitter Top Pane
Nested Splitter Bottom Content

Left Pane
Nested Splitter Top Pane
Nested Splitter Bottom Pane

ResizeWithParentPane="false"

Left Pane
Nested Splitter Top Pane
Nested Splitter Bottom Pane
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can nest RadSplitter control in a RadPane control to achieve complex layouts. By default the nested splitters will be resized when the pane is resized. If you do not need the nested splitter to be resized together with the pane you can set the ResizeWithParentPane to false.

  • 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">
        <h2>ResizeWithParentPane="true"</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="300" Width="795" >
            <telerik:RadPane ID="navigationPane" runat="server" Width="150">
                Left Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="contentPane" runat="server" Scrolling="none">
                <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter2" runat="server" Orientation="Horizontal">
                    <telerik:RadPane ID="topPane" runat="server">
                        Nested Splitter Top Pane
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Forward">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="bottomPane" runat="server">
                        Nested Splitter Bottom Content
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
        <br />
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter5" runat="server" Width="795" Height="300" Orientation="Horizontal" >
            <telerik:RadPane ID="Radpane2" runat="server" Height="150">
                Left Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar5" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane6" runat="server" Scrolling="None">
                <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter6" runat="server">
                    <telerik:RadPane ID="Radpane7" runat="server">
                        Nested Splitter Top Pane
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="Radsplitbar6" runat="server" CollapseMode="Forward">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="Radpane8" runat="server">
                        Nested Splitter Bottom Pane
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <div class="demo-container size-wide">
        <h2>ResizeWithParentPane="false"</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter3" runat="server" Height="300" Width="795" >
            <telerik:RadPane ID="Radpane1" runat="server" Width="150">
                Left Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar3" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane3" runat="server">
                <table style="height: 100%; width: 100%">
                    <tr>
                        <td align="center">
                            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter4" runat="server" Width="300" Height="200" Orientation="Horizontal"
                                ResizeWithParentPane="false">
                                <telerik:RadPane ID="Radpane4" runat="server">
                                    Nested Splitter Top Pane
                                </telerik:RadPane>
                                <telerik:RadSplitBar ID="Radsplitbar4" runat="server" CollapseMode="Forward">
                                </telerik:RadSplitBar>
                                <telerik:RadPane ID="Radpane5" runat="server">
                                    Nested Splitter Bottom Pane
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </td>
                    </tr>
                </table>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?