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

Collapse/Expand

SplitBar Collapse Modes

Left pane
Middle pane1
Middle pane2
End Pane

MiddlePane1.Collapsed=true

Left pane
Middle pane1
Middle pane2
End Pane

RadSplitter allows you to enable the collapse of a pane using the CollapseMode property of the RadSplitBar object. CollapseMode property has the following values:

  • None - collapse is not enabled.
  • Forward - the pane at the left (top) position of the SpltBar will be collapsed. This is the default value.
  • Backward - the pane at the right (bottom) position of the SpltBar will be collapsed
  • Both - collapse can be done in both direction

When the SplitBar is collapsed in one of the directions, the collapse in the other direction is disabled when the value of CollapseMode is set to Both.

Instructions

Use the collapse bar image to collapse/expand the panes. The first SplitBar element has CollapseMode set to Forward. The middle SplitBar has CollapseMode set to Both. The end SplitBar has CollapseMode set to Backward.

  • 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>
            SplitBar Collapse Modes
        </h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Width="795" Height="300">
            <telerik:RadPane ID="LeftPane" runat="server" Width="100">
                Left pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="MiddlePane1" runat="server" Width="200">
                Middle pane1
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="MiddlePane2" runat="server" Width="200">
                Middle pane2
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar3" runat="server" CollapseMode="Backward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="EndPane" runat="server">
                End Pane
            </telerik:RadPane>
        </telerik:RadSplitter><br />
    </div>
    <div class="demo-container size-wide">
        <h2>MiddlePane1.Collapsed=true</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter2" runat="server" Width="795" Height="300">
            <telerik:RadPane ID="Radpane1" runat="server" Width="100">
                Left pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar4" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane2" runat="server" Width="200" Collapsed="true">
                Middle pane1
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar5" runat="server" CollapseMode="Both">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane3" runat="server" Width="200">
                Middle pane2
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar6" runat="server" CollapseMode="Backward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane4" runat="server">
                End Pane
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance