The requested page is not available for the requested platform. You are viewing the content for Default platform.

Expand and Collapse Nodes

  • 2 min 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

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.