Expand and Collapse Nodes

• Aug 23, 2023
• 3 minutes to read

Parent nodes display expand buttons to show/hide their child nodes. Use the TreeListSettingsBehavior.ExpandCollapseAction option to specify which user action (click/double click) expands or collapses nodes.

Expand Nodes

Expand a Specified Node

• The TreeListNode.Expanded property (server side)

C#

if (TreeListNode.Key == "test") {
    TreeListNode.Expanded = true;
}

• The ASPxClientTreeList.ExpandNode method (client side)

JS

function OnFocusedNodeChange(s, e) {
    var nodeKey = s.GetFocusedNodeKey();
    var nodeState = s.GetNodeState(nodeKey);

    if (nodeState === "Collapsed")
        s.ExpandNode(nodeKey);
    else if (nodeState === "Expanded")
        s.CollapseNode(nodeKey);
};

Expand All Nodes

• The ExpandAll() method (server side)

ASPX

<dx:ASPxTreeList ID="treeList" runat="server" ...>
    <Columns>
    ...
    </Columns>
    ...
</dx:ASPxTreeList>

C#

protected void Page_Load(object sender, EventArgs e) {
    if(!IsPostBack) {
        ...
        treeList.DataBind();
        treeList.ExpandAll();
    }
}

• The ExpandAll method (client side)

ASPX

<dx:ASPxTreeList ID="performanceTreeList" runat="server" ... ClientInstanceName="myTreeList" >

JS

myTreeList.ExpandAll();

• The ASPxTreeList.ExpandToLevel method - Allows you to expand all the nodes from the root to the specified level.

C#

protected void Page_Load(object sender, EventArgs e) {
    ASPxTreeList1.DataBind();
    ASPxTreeList1.ExpandToLevel(2);
}

Result:

Related events

Event	Description
ASPxClientTreeList.NodeExpanding	Fires on the client side before an end user expands a node.
ASPxTreeList.NodeExpanding	Fires on the server side before an end user expands a node or it is expanded programmatically on the client-side.
ASPxTreeList.NodeExpanded	Fires on the server side when a node is expanded.

Collapse Nodes

Collapse a Specified Node

• The TreeListNode.Expanded property

C#

if (TreeListNode.Key == "test") {
    TreeListNode.Expanded = false;
}

• The ASPxClientTreeList.CollapseNode method

JS

function OnFocusedNodeChange(s, e) {
    var nodeKey = s.GetFocusedNodeKey();
    var nodeState = s.GetNodeState(nodeKey);

    if (nodeState === "Collapsed")
        s.ExpandNode(nodeKey);
    else if (nodeState === "Expanded")
        s.CollapseNode(nodeKey);
};

Collapse All Nodes

• The ASPxTreeList.CollapseAll method (server side)

ASPX

<dx:ASPxTreeList ID="treeList" runat="server" ...>
    <Columns>
    ...
    </Columns>
    ...
</dx:ASPxTreeList>

C#

protected void Page_Load(object sender, EventArgs e) {
    if(!IsPostBack) {
        ...
        treeList.DataBind();
        treeList.CollapseAll();
    }
}

• The ASPxClientTreeList.CollapseAll method (client side)

ASPX

<dx:ASPxTreeList ID="performanceTreeList" runat="server" ... ClientInstanceName="myTreeList" >

JS

myTreeList.CollapseAll();

Related Events

Event	Description
ASPxClientTreeList.NodeCollapsing	Fires on the client side before an end user collapses a node.
ASPxTreeList.NodeCollapsing	Fires on the server side before an end user collapses a node or it is collapsed programmatically on the client-side.
ASPxTreeList.NodeCollapsed	Fires on the server side when a node is collapsed.

Note

The tree list raises client-side ASPxClientTreeList.NodeExpanding and ASPxClientTreeList.NodeCollapsing events only when an end-user expands/collapses a node.

The server-side ASPxTreeList.NodeExpanding and ASPxTreeList.NodeCollapsing events are raised when an end-user expands/collapses a node, or when a node is expanded/collapsed programmatically on the client side.

How to Allow Expanding Only One Child Node

This example below demonstrates how to configure the ASPxTreeList so that only one child node is expanded at a time.

function OnNodeExpanding(s, e) {
    s.PerformCallback(e.nodeKey);
    e.cancel = true;
}

<dx:ASPxTreeList ID="ASPxTreeList1" runat="server" DataSourceID="AccessDataSource1"
    AutoGenerateColumns="False" KeyFieldName="EmployeeID" ParentFieldName="ReportsTo"
    OnCustomCallback="ASPxTreeList1_CustomCallback">
    <ClientSideEvents NodeExpanding="OnNodeExpanding" />
    <Columns>
        <dx:TreeListTextColumn FieldName="LastName"/>
        <dx:TreeListTextColumn FieldName="FirstName" />
    </Columns>
</dx:ASPxTreeList>

protected void ASPxTreeList1_CustomCallback(object sender, TreeListCustomCallbackEventArgs e) {
    ASPxTreeList1.CollapseAll();
    TreeListNode node = ASPxTreeList1.FindNodeByKeyValue(e.Argument);
    while (node.ParentNode != null) {
        node.Expanded = true;
        node = node.ParentNode;
    }
}