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

Initial Size

Vertical Splitters

SplitterAbsolute size is set to 500px

Left Pane - set to free size
Middle Pane - set to free size
End Pane - set to free size
Left Pane - set to absolute size - 100px
Middle Pane - set to absolute size - 300px
End Pane - set to free size
Left Pane - set to absolute size - 280px
Middle Pane - set to absolute size - 120px
End Pane - set to free size
Left Pane - set to percent size - 80%
Middle Pane - set to percent size - 10%
End Pane - set to percent size - 10%

Splitter Percent size is set to 80%

Left Pane - set to absolute size - 80px
Middle Pane - set to absolute size - 120px
End Pane - set to free size

Left Pane - set to absolute size - 200px
Middle Pane - set to absolute size - 200px
End Pane - set to free size

Splitter Free size

Left Pane - set to free size
Middle Pane - set to free size
End Pane - set to free size
Left Pane - set to absolute size - 80px
Middle Pane - set to absolute size - 120px
End Pane - set to absolute size - 300px

Horizontal Splitters

Splitter Absolute size is set to 500px

Top Pane - set to free size
Middle Pane - set to free size
Bottom Pane - set to free size
Top Pane - set to absolute size - 100px
Middle Pane - set to absolute size - 300px
Bottom Pane - set to free size
Top Pane - set to absolute size - 250px
Middle Pane - set to absolute size - 110px
Bottom Pane - set to free size
Top Pane - set to percent size - 80%
Middle Pane - set to percent size - 10%
Bottom Pane - set to percent size - 10%

Splitter Free size

Top Pane - set to absolute size - 80px
Middle Pane - set to absolute size - 120px
Bottom Pane - set to absolute size - 300px
Top Pane - set to free size
Middle Pane - set to free size
Bottom Pane - set to free size

When configuring the size of the panes and spliiters you can use one of the three possible value types:

  • Absolute Size - define integer values or values suffixed with "px" at the end. Example: 
     Width="500" or Width="500px"
  • Percent Size - define the value using percents. Example: 
     Width="80%"
  • Free size - skip the definition of the size properties (Width,Height). Use this option when you don't need absolute size control or when you want a pane to allocate all of the free size when the splitter is resized.
    • When you use free size on a splitter control, the splitter size will be calculated automatically from the browser when the control is rendered.
    • When you use free size on a pane control, the splitter will calculate the pane size according to the size that is remaining from the other absolute size panes. If all panes are free sized then the size of each of them will be equal.

You can also set a different size for the splitbars if you specify the SplitBarsSize. This property can be defined only in absolute values.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <h2>Vertical Splitters</h2>
    <div class="demo-container size-custom">
        <p>
            <strong>SplitterAbsolute size</strong> is set to 500px
        </p>
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="200" Width="500" CssClass="floaterFirst">
            <telerik:RadPane ID="RadPane1" runat="server">
                Left Pane - set to <strong>free</strong> size
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="RadPane2" runat="server">
                Middle Pane - set to <strong>free</strong> size
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar2" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane3" runat="server">
                End Pane - set to <strong>free</strong> size
            </telerik:RadPane>
        </telerik:RadSplitter>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter2" runat="server" Height="200" Width="500" CssClass="floater">
            <telerik:RadPane ID="Radpane4" runat="server" Width="100">
                Left Pane - set to <strong>absolute</strong> size - 100px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar3" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane5" runat="server" Width="300">
                Middle Pane - set to <strong>absolute</strong> size - 300px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar4" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane6" runat="server">
                End Pane - set to <strong>free</strong> size
            </telerik:RadPane>
        </telerik:RadSplitter>
        <div class="clearer"></div>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter9" runat="server" Height="200" Width="500" CssClass="floaterFirst">
            <telerik:RadPane ID="Radpane25" runat="server" Width="280">
                Left Pane - set to <strong>absolute</strong> size - 280px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar17" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane26" runat="server" Width="120">
                Middle Pane - set to <strong>absolute</strong> size - 120px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar18" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane27" runat="server">
                End Pane - set to <strong>free</strong> size
            </telerik:RadPane>
        </telerik:RadSplitter>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter4" runat="server" Height="200" Width="500" CssClass="floater">
            <telerik:RadPane ID="Radpane7" runat="server" Width="80%">
                Left Pane - set to <strong>percent</strong> size - 80%
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar5" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane8" runat="server" Width="10%">
                Middle Pane - set to <strong>percent</strong> size - 10%
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar6" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane9" runat="server" Width="10%">
                End Pane - set to <strong>percent</strong> size - 10%
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <div class="demo-container size-custom">
        <p>
            <strong>Splitter Percent size</strong> is set to 80%
        </p>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter3" runat="server" Height="200" Width="80%">
            <telerik:RadPane ID="Radpane13" runat="server" Width="80">
                Left Pane - set to <strong>absolute</strong> size - 80px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar9" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane14" runat="server" Width="120">
                Middle Pane - set to <strong>absolute</strong> size - 120px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar10" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane15" runat="server">
                End Pane - set to <strong>free</strong> size
            </telerik:RadPane>
        </telerik:RadSplitter>
        <br />
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter8" runat="server" Height="200" Width="80%">
            <telerik:RadPane ID="Radpane22" runat="server" Width="200">
                Left Pane - set to <strong>absolute</strong> size - 200px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar15" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane23" runat="server" Width="200">
                Middle Pane - set to <strong>absolute</strong> size - 200px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar16" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane24" runat="server">
                End Pane - set to <strong>free</strong> size
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <div class="demo-container size-custom">
        <p>
            <strong>Splitter Free size</strong>
        </p>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter7" runat="server" Height="200" CssClass="floaterFirst">
            <telerik:RadPane ID="Radpane19" runat="server">
                Left Pane - set to <strong>free</strong> size
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar13" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane20" runat="server">
                Middle Pane - set to <strong>free</strong> size
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar14" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane21" runat="server">
                End Pane - set to <strong>free</strong> size
            </telerik:RadPane>
        </telerik:RadSplitter>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter5" runat="server" Height="200" CssClass="floater">
            <telerik:RadPane ID="Radpane10" runat="server" Width="80">
                Left Pane - set to <strong>absolute</strong> size - 80px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar7" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane11" runat="server" Width="120">
                Middle Pane - set to <strong>absolute</strong> size - 120px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar8" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane12" runat="server" Width="300">
                End Pane - set to <strong>absolute</strong> size - 300px
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>

    <h2>Horizontal Splitters
    </h2>
    <div class="demo-container size-custom">
        <p>
            <strong>Splitter Absolute size</strong> is set to 500px
        </p>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter10" runat="server" Width="200" Height="500" Orientation="Horizontal" CssClass="floaterFirst">
            <telerik:RadPane ID="Radpane28" runat="server">
                Top Pane - set to <strong>free</strong> size
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar19" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane29" runat="server">
                Middle Pane - set to <strong>free</strong> size
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar20" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane30" runat="server">
                Bottom Pane - set to <strong>free</strong> size
            </telerik:RadPane>
        </telerik:RadSplitter>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter11" runat="server" Width="200" Height="500" Orientation="Horizontal" CssClass="floater">
            <telerik:RadPane ID="Radpane31" runat="server" Height="100">
                Top Pane - set to <strong>absolute</strong> size - 100px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar21" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane32" runat="server" Height="300">
                Middle Pane - set to <strong>absolute</strong> size - 300px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar22" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane33" runat="server">
                Bottom Pane - set to <strong>free</strong> size
            </telerik:RadPane>
        </telerik:RadSplitter>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter12" runat="server" Width="200" Height="500" Orientation="Horizontal" CssClass="floater">
            <telerik:RadPane ID="Radpane34" runat="server" Height="250">
                Top Pane - set to <strong>absolute</strong> size - 250px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar23" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane35" runat="server" Height="110">
                Middle Pane - set to <strong>absolute</strong> size - 110px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar24" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane36" runat="server">
                Bottom Pane - set to <strong>free</strong> size
            </telerik:RadPane>
        </telerik:RadSplitter>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter14" runat="server" Width="200" Height="500" Orientation="Horizontal" CssClass="floater">
            <telerik:RadPane ID="Radpane40" runat="server" Height="80%">
                Top Pane - set to <strong>percent</strong> size - 80%
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar27" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane41" runat="server" Height="10%">
                Middle Pane - set to <strong>percent</strong> size - 10%
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar28" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane42" runat="server" Height="10%">
                Bottom Pane - set to <strong>percent</strong> size - 10%
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <div class="demo-container size-custom">
        <p>
            <strong>Splitter Free size</strong>
        </p>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter15" runat="server" Width="200" Orientation="Horizontal" CssClass="floaterFirst">
            <telerik:RadPane ID="Radpane43" runat="server" Height="80">
                Top Pane - set to <strong>absolute</strong> size - 80px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar29" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane44" runat="server" Height="120">
                Middle Pane - set to <strong>absolute</strong> size - 120px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar30" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane45" runat="server" Height="300">
                Bottom Pane - set to <strong>absolute</strong> size - 300px
            </telerik:RadPane>
        </telerik:RadSplitter>
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter17" runat="server" Width="200" Orientation="Horizontal" CssClass="floater">
            <telerik:RadPane ID="Radpane49" runat="server">
                Top Pane - set to <strong>free</strong> size
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar33" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane50" runat="server">
                Middle Pane - set to <strong>free</strong> size
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar34" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane51" runat="server">
                Bottom Pane - set to <strong>free</strong> size
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance