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

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

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.

  • DefaultVB.aspx
<%@ Page Language="vb" AutoEventWireup="false"  %>

<!DOCTYPE html>
<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>

Support & Learning Resources

Find Assistance