Splitter - Resize Modes

ResizeMode="AdjacentPane"

Left Pane
Middle Pane
End Pane

ResizeMode="EndPane"

Left Pane
Middle Pane
End Pane

ResizeMode="Proportional"

Left Pane
Middle Pane
End Pane

ResizeStep

Left Pane
Middle Pane
End Pane
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadSplitter allows to define the way the panes are resized when a resize bar is dragged.
Use the ResizeMode property of the RadSplitter object to define this behavior. There are 3 ResizeModes defined:

  • AdjacentPane (default) - when this ResizeMode is used the panes that are in the left and right side (top/bottom respectively) of the resize bar will be affected only.
  • EndPane - only the end pane and the pane that is at the left(top) of the resize bar are affected
  • Proportional - all the panes that are positioned in the direction to which the resizebar is dragged will be affected. If the resizebar is dragged in the right direction all the panes that are on the right side of the resizebar will be affected. They will obtain a proportional size corresponding to their current size.

The ResizeMode property also affects the way the panes are resized when a pane from the splitter is collapsed/expanded.

You can use the ResizeStep property of the SplitBar to define the step in which the resize bars are snapped.

  • 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>ResizeMode="AdjacentPane"</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="200" Width="795" ResizeMode="AdjacentPane">
            <telerik:RadPane ID="RadPane1" runat="server" Width="100">
                Left Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="RadPane2" runat="server" Width="200">
                Middle Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="RadPane3" runat="server">
                End Pane
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <div class="demo-container size-wide">
        <h2>ResizeMode="EndPane"</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter2" runat="server" Height="200" Width="795" ResizeMode="EndPane">
            <telerik:RadPane ID="Radpane4" runat="server" Width="100">
                Left Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar3" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane5" runat="server" Width="200">
                Middle Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar4" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane6" runat="server">
                End Pane
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <div class="demo-container size-wide">
        <h2>ResizeMode="Proportional"</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter3" runat="server" Height="200" Width="795" ResizeMode="Proportional">
            <telerik:RadPane ID="Radpane7" runat="server" Width="100">
                Left Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar5" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane8" runat="server" Width="200">
                Middle Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar6" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane9" runat="server">
                End Pane
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <div class="demo-container size-wide">
        <h2>ResizeStep</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter4" runat="server" Height="200" Width="795">
            <telerik:RadPane ID="Radpane10" runat="server" Width="100">
                Left Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar7" runat="server" CollapseMode="Forward" ResizeStep="20">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane11" runat="server" Width="200">
                Middle Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar8" runat="server" CollapseMode="Forward" ResizeStep="20">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane12" runat="server">
                End Pane
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?