Back to Devexpress

ASPxSplitter Class

aspnet-devexpress-dot-web-d2fed987.md

latest12.0 KB
Original Source

ASPxSplitter Class

Represents a splitter control.

Namespace : DevExpress.Web

Assembly : DevExpress.Web.v25.2.dll

NuGet Package : DevExpress.Web

Declaration

csharp
public class ASPxSplitter :
    ASPxWebControl,
    IRequiresLoadPostDataControl,
    IEndInitAccessorContainer,
    IControlDesigner
vb
Public Class ASPxSplitter
    Inherits ASPxWebControl
    Implements 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.

Create a Splitter Control

Design Time

The ASPxSplitter control is available on the DX.25.2: 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.

aspx
<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


csharp
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);
}
vb
Imports DevExpress.Web
...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim splitter As ASPxSplitter = New ASPxSplitter()
    splitter.ID = "splitter"
    Dim navBar As ASPxNavBar = New ASPxNavBar()
    navBar.ID = "navBar"
    navBar.AllowSelectItem = True
    navBar.Target = "contentUrlPane"
    Dim navBarGroup As NavBarGroup = New NavBarGroup("Sample")
    navBarGroup.Items.AddRange(New List(Of NavBarItem)() From {
        New NavBarItem With {
            .Text = "Page 1",
            .NavigateUrl = "SamplePages/Page1.aspx"
        },
        New NavBarItem With {
            .Text = "Page 2",
            .NavigateUrl = "SamplePages/Page2.aspx",
            .Selected = True
        },
        New NavBarItem With {
            .Text = "Page 3",
            .NavigateUrl = "SamplePages/Page3.aspx"
        }
    })
    navBar.Groups.Add(navBarGroup)
    Dim pane1 As SplitterPane = New SplitterPane()
    pane1.Controls.Add(navBar)
    splitter.Panes.Add(pane1)
    Dim pane2 As SplitterPane = New SplitterPane()
    pane2.Controls.Add(New LiteralControl("Right Container"))
    splitter.Panes.Add(pane2)
    Page.Form.Controls.Add(splitter)
End Sub

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.

Implements

Show 14 items

IComponent

IDisposable

IParserAccessor

IDataBindingsAccessor

IControlBuilderAccessor

IControlDesignerAccessor

IExpressionsAccessor

IAttributeAccessor

IUrlResolutionService

INamingContainer

IPostBackDataHandler

IPostBackEventHandler

ICallbackEventHandler

IPropertiesOwner

Inheritance

Object Control WebControl ASPxWebControlBase ASPxWebControl ASPxSplitter MVCxSplitter

See Also

ASPxSplitter Members

Splitter

DevExpress.Web Namespace