Skip to main content

Expand and Collapse Nodes

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

TreeList - Nodes

#Expand Nodes

#Expand a Specified Node

if (TreeListNode.Key == "test") {
    TreeListNode.Expanded = true;
}
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

<dx:ASPxTreeList ID="treeList" runat="server" ...>
    <Columns>
    ...
    </Columns>
    ...
</dx:ASPxTreeList>
protected void Page_Load(object sender, EventArgs e) {
    if(!IsPostBack) {
        ...
        treeList.DataBind();
        treeList.ExpandAll();
    }
}
<dx:ASPxTreeList ID="performanceTreeList" runat="server" ... ClientInstanceName="myTreeList" >
myTreeList.ExpandAll();
protected void Page_Load(object sender, EventArgs e) {
    ASPxTreeList1.DataBind();
    ASPxTreeList1.ExpandToLevel(2);
}

Result:

cdExpandNodes

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

if (TreeListNode.Key == "test") {
    TreeListNode.Expanded = false;
}
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

<dx:ASPxTreeList ID="treeList" runat="server" ...>
    <Columns>
    ...
    </Columns>
    ...
</dx:ASPxTreeList>
protected void Page_Load(object sender, EventArgs e) {
    if(!IsPostBack) {
        ...
        treeList.DataBind();
        treeList.CollapseAll();
    }
}
<dx:ASPxTreeList ID="performanceTreeList" runat="server" ... ClientInstanceName="myTreeList" >
myTreeList.CollapseAll();

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.

js
function OnNodeExpanding(s, e) {
    s.PerformCallback(e.nodeKey);
    e.cancel = true;
}
html
<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>
C#
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;
    }
}