Skip to main content
A newer version of this page is available. .

ASPxSplitter Class

Represents a splitter control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v20.2.dll


public class ASPxSplitter :


The ASPxSplitter control allows you to easily organize the web page content layout by dividing it into several content panes and control the manner in which the panes can be resized and collapsed/expanded by end-users.

The ASPxSplitter control is made up of a tree of panes represented by SplitterPane objects. Panes at the top level (level 0) are called root panes. Panes that have a parent pane are called child panes. All root panes are stored in the splitter control’s ASPxSplitter.Panes collection. Child panes are stored in the parent pane’s SplitterPane.Panes collection. This enables you to create a hierarchical pane structure of any complexity, if required.

The orientation of root panes is specified by the ASPxSplitter.Orientation property of the ASPxSplitter control. Child panes are automatically arranged with the opposite orientation of their immediate parent pane.

The visibility and the visual order of panes within their containers can be controlled by the SplitterPane.Visible and SplitterPane.VisibleIndex properties of pane objects. Each pane is capable of displaying a content web page specified by the SplitterPane.ContentUrl property. You can use the SplitterPane.ScrollBars property to control which scrollbars should appear within a pane.

Individual panes are isolated from each other using specific split bars called separators. The separators provide end-users with the following capabilities to modify the layout of the ASPxSplitter control on the client side:

The ASPxSplitter control offers you complete customization of root panes, child panes and separators styles (for instance, see the properties available via the control’s ASPxSplitter.Styles property and via a pane object’s SplitterPane.PaneStyle and SplitterPane.CollapsedStyle properties).


The ASPxSplitter control provides you with comprehensive client-side functionality implemented using JavaScript code:

The client-side API is always available for this control.

Declarative approach:

<dx:ASPxSplitter ID="ASPxSplitter1" runat="server"  Height="100%" FullscreenMode="true" >
        <dx:SplitterPane >
                <dx:SplitterContentControl Height="100%" runat="server">
                    <dx:ASPxButton ID="ASPxButton1" runat="server" Text="Button1">
                <dx:SplitterContentControl  Height="100%">
                    <dx:ASPxButton ID="ASPxButton2" runat="server" Text="Button2">

Programmatic approach:

protected void Page_Load(object sender, EventArgs e)
    ASPxSplitter splitter = new ASPxSplitter();
    splitter.ID = "ASPxSplitter1";
    splitter.FullscreenMode = true;
    splitter.Width = splitter.Height = new Unit(100, UnitType.Percentage);

    SplitterPane pane1 = new SplitterPane();
    pane1.Name = "Button1";
    ASPxButton button1 = new ASPxButton();
    button1.Text = "b1";

    SplitterPane pane2 = new SplitterPane();
    pane2.Name = "Button2";
    ASPxButton button2 = new ASPxButton();
    button2.Text = "b2";
See Also