Search
Collapsing and Expanding Tree Branches

If a diagram represents a tree structure, the tree branch starting from a node can be collapsed or expanded again in order to hide or display hierarchy details. Use the nodes' Collapse and Expand methods to do this programmatically. To determine whether a subtree is expanded or collapsed, check its root's Expanded property.

Displaying Expand/Collapse Button

If the Expandable property of a node is set to true, there is a [±] button displayed beside the node to allow users to collapse or expand the tree branch starting there. The button location can be customized through the diagram's ExpandButtonPosition property. By default, pressing that button calls automatically the Collapse and Expand methods and raises the TreeExpanded or TreeCollapsed events.

Defining Tree Direction

A node can be connected to other nodes through outgoing and incoming links. Setting the ExpandOnIncoming property specifies which items connected to a node will be regarded as its descendants. If ExpandOnIncoming is false (default value) then each node will be regarded as a parent of its outgoing links and the items attached to them. If ExpandOnIncoming is set to true, the node's incoming links define its children. So that property specifies the direction of parent-children relationship between diagram items and respectively the overall direction in which collapsing / expanding is done.

Expanding a Branch Recursively

Use the RecursiveExpand property to specify whether the whole tree branch starting from a node will be shown when expanding, or only the first level of descendants. A related property is the Expandable property of the Group class, which specifies whether expanding and collapsing propagate through group members.

HtmlBuilder Support

The HtmlBuilder class can generate map areas for the [±] buttons displayed beside Expandable nodes. To enable that, assign an URL to the ExpandBtnHyperLink property. That URL can contain some format specifiers which are automatically replaced with the values of nodes' Tag or ZIndex properties. That lets you identify on the server side the node whose [±] button is clicked.

Custom Expand/Collapse Functionality

The ExpandButtonAction property lets you override the standard functionality of the [±] button. Set this property to RaiseEvents and handle the ExpandButtonClicked event if you need to implement your own expand/collapse logic.