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.
#Expand Nodes
#Expand a Specified Node
- The TreeListNode.Expanded property (server side)
if (TreeListNode.Key == "test") {
TreeListNode.Expanded = true;
}
- The ASPxClientTreeList.ExpandNode method (client side)
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)
<dx:ASPxTreeList ID="treeList" runat="server" ...>
<Columns>
...
</Columns>
...
</dx:ASPxTreeList>
protected void Page_Load(object sender, EventArgs e) {
if(!IsPostBack) {
...
treeList.DataBind();
treeList.ExpandAll();
}
}
- The ExpandAll method (client side)
<dx:ASPxTreeList ID="performanceTreeList" runat="server" ... ClientInstanceName="myTreeList" >
myTreeList.ExpandAll();
- The ASPxTreeList.ExpandToLevel method - Allows you to expand all the nodes from the root to the specified level.
protected void Page_Load(object sender, EventArgs e) {
ASPxTreeList1.DataBind();
ASPxTreeList1.ExpandToLevel(2);
}
Result:
#Related events
Event | Description |
---|---|
Fires on the client side before an end user expands a node. | |
Fires on the server side before an end user expands a node or it is expanded programmatically on the client-side. | |
Fires on the server side when a node is expanded. |
#Collapse Nodes
#Collapse a Specified Node
- The TreeListNode.Expanded property
if (TreeListNode.Key == "test") {
TreeListNode.Expanded = false;
}
- The ASPxClientTreeList.CollapseNode method
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)
<dx:ASPxTreeList ID="treeList" runat="server" ...>
<Columns>
...
</Columns>
...
</dx:ASPxTreeList>
protected void Page_Load(object sender, EventArgs e) {
if(!IsPostBack) {
...
treeList.DataBind();
treeList.CollapseAll();
}
}
- The ASPxClientTreeList.CollapseAll method (client side)
<dx:ASPxTreeList ID="performanceTreeList" runat="server" ... ClientInstanceName="myTreeList" >
myTreeList.CollapseAll();
#Related Events
Event | Description |
---|---|
Fires on the client side before an end user collapses a node. | |
Fires on the server side before an end user collapses a node or it is collapsed programmatically on the client-side. | |
Fires on the server side when a node is collapsed. |
Note
The tree list raises client-side ASPx
The server-side ASPx
#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;
}
}