Expand and Collapse Nodes

• Dec 17, 2020
• 2 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.