Splitter - Min/Max Pane Size

Left Pane
(Width="100" MaxWidth="200" MinWidth="30")
Right Pane
(Width="200" MaxWidth="250")
Top Pane
(Height="100" MaxHeight="200" MinHeight="50")
Bottom Pane
(MaxHeight = "250")
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadSplitter allows you to define minimum and maximum size to which a pane can be resized. Use the MinWidth, MaxWidth and MinHeight, MaxHeight properties of the RadPane object to set these restrictions. You can disable the scrollbars of a pane by setting Scrolling property of the RadPane to none.


Using the resize bars try to resize the panes in the Splitters above. You will receive a feedback from the resize bars indicating what is the max/min size of the pane.

  • 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>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="300">
                <telerik:RadPane ID="RadPane1" runat="server" MinWidth="30" MaxWidth="200" Width="100">
                    Left Pane
                        <br />
                    (Width="100" MaxWidth="200" MinWidth="30")
                <telerik:RadSplitBar ID="RadSplitbar1" runat="server">
                <telerik:RadPane ID="RadPane2" runat="server" MaxWidth="250" Width="200">
                    Right Pane
                        <br />
                    (Width="200" MaxWidth="250")
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter2" runat="server" Height="300" Width="300" Orientation="Horizontal">
                <telerik:RadPane ID="RadPane3" runat="server" Height="100" MinHeight="50" MaxHeight="200">
                    Top Pane
                        <br />
                    (Height="100" MaxHeight="200" MinHeight="50")
                <telerik:RadSplitBar ID="Radsplitbar2" runat="server">
                <telerik:RadPane ID="RadPane4" runat="server" MaxHeight="250">
                    Bottom Pane
                        <br />
                    (MaxHeight = "250")

Find Assistance

Help Us Improve

Was this example helpful?