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

Fixed Layout

Nested Splitter Containers Without Splitbars

Left Pane
Top Pane
Left Pane
Right Pane

You can use the RadSplitter only as a container for your layout. If you do not place the RadSplitBar controls in the splitter's declaration the splitter will display the fixed layout. If you need to change the panes' properties, you can use the client-size API.

By nesting splitters with different Orientation property you can achieve complex layouts.

  • DefaultCS.aspx
<%@ Page Language="c#" 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>
            Nested Splitter Containers Without Splitbars
        </h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter5" runat="server" Height="400" Width="800">
            <telerik:RadPane ID="Radpane9" runat="server" Width="100">
                Left Pane
            </telerik:RadPane>
            <telerik:RadPane ID="Radpane10" runat="server" Scrolling="none">
                <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter6" runat="server" Orientation="Horizontal">
                    <telerik:RadPane ID="Radpane11" runat="server" Height="100">
                        Top Pane
                    </telerik:RadPane>
                    <telerik:RadPane ID="Radpane12" runat="server" Scrolling="none">
                        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter1" runat="server">
                            <telerik:RadPane ID="Radpane1" runat="server">
                                Left Pane
                            </telerik:RadPane>
                            <telerik:RadPane ID="Radpane2" runat="server">
                                Right Pane
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance