Skip to main content
Tab

ASPxSplitter Class

Represents a splitter control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

public class ASPxSplitter :
    ASPxWebControl,
    IRequiresLoadPostDataControl,
    IEndInitAccessorContainer,
    IControlDesigner

Remarks

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.

ASPxSplitter

Create a Splitter Control

Design Time

The ASPxSplitter control is available on the DX.24.1: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize the control’s settings, or paste the control’s markup in the page’s source code.

<dx:ASPxSplitter ID="splitter" runat="server">
    <Panes>
        <dx:SplitterPane>
            <ContentCollection>
                <dx:SplitterContentControl runat="server">
                    <dx:ASPxNavBar runat="server" AllowSelectItem="True" Target="contentUrlPane"
                        ID="navBar">
                        <Groups>
                            <dx:NavBarGroup Text="Sample Pages">
                                <Items>
                                    <dx:NavBarItem NavigateUrl="SamplePages/Page1.aspx" Text="Page 1">
                                    </dx:NavBarItem>
                                    <dx:NavBarItem NavigateUrl="SamplePages/Page2.aspx" Selected="True" Text="Page 2">
                                    </dx:NavBarItem>
                                    <dx:NavBarItem NavigateUrl="SamplePages/Page3.aspx" Text="Page 3">
                                    </dx:NavBarItem>
                                </Items>
                            </dx:NavBarGroup>
                        </Groups>
                    </dx:ASPxNavBar>
                </dx:SplitterContentControl>
            </ContentCollection>
        </dx:SplitterPane>
        <dx:SplitterPane>
            <ContentCollection>
                <dx:SplitterContentControl runat="server">
                    <div class="exampleContent">Right container</div>
                </dx:SplitterContentControl>
            </ContentCollection>
        </dx:SplitterPane>
    </Panes>
</dx:ASPxSplitter>

Run Time


using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e) {
    ASPxSplitter splitter = new ASPxSplitter();
    splitter.ID = "splitter";

    ASPxNavBar navBar = new ASPxNavBar();
    navBar.ID = "navBar";
    navBar.AllowSelectItem = true;
    navBar.Target = "contentUrlPane";
    NavBarGroup navBarGroup = new NavBarGroup("Sample");
    navBarGroup.Items.AddRange(new List<NavBarItem>() {
        new NavBarItem { Text = "Page 1", NavigateUrl = "SamplePages/Page1.aspx"},
        new NavBarItem { Text = "Page 2", NavigateUrl = "SamplePages/Page2.aspx", Selected = true},
        new NavBarItem { Text = "Page 3", NavigateUrl = "SamplePages/Page3.aspx"},
    });
    navBar.Groups.Add(navBarGroup);

    SplitterPane pane1 = new SplitterPane();
    pane1.Controls.Add(navBar);
    splitter.Panes.Add(pane1);

    SplitterPane pane2 = new SplitterPane();
    pane2.Controls.Add(new LiteralControl("Right Container"));
    splitter.Panes.Add(pane2);

    Page.Form.Controls.Add(splitter);
}

Note

DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.

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).

Note

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

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

See Also