ASPxClientTreeList.CollapseNode(key) Method
Collapses the specified node preserving the expanded state of child nodes.
Declaration
CollapseNode(
key: string
): void
Parameters
Name | Type | Description |
---|---|---|
key | string | A String value that uniquely identifies the node. |
Remarks
To collapse all nodes, use the ASPxClientTreeList.CollapseAll method. To expand the specified node, use the ASPxClientTreeList.ExpandNode method.
To learn more, see Expanding and Collapsing Nodes.
Example
This example demonstrates how to use the ASPxClientTreeList.GetFocusedNodeKey method to expand and collapse tree nodes based on the state of a node (collapsed or expanded). You can get the node state by calling the ASPxClientTreeList.GetNodeState method in the client-side ASPxTreeList.FocusedNodeChanged event. Demo limitation: if you close the topmost parent node and do not have other nodes except that one, you will have to expand this node by clicking the Expand Button.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-collapse-expand-focused-nodes-on-client-side-t228416
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.ASPxTreeList.v14.2, Version=14.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxTreeList" TagPrefix="dx" %>
<%@ Register assembly="DevExpress.Web.v14.2, Version=14.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to use collapse/expand focused nodes on client side</title>
<script>
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);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<dx:ASPxTreeList ID="TreeList"
runat="server"
AutoGenerateColumns="False"
DataSourceID="ProductsDataSource"
KeyFieldName="EmployeeID"
ParentFieldName="ReportsTo"
Width="50%">
<Columns>
<dx:TreeListTextColumn FieldName="EmployeeID" VisibleIndex="0" ReadOnly="true"></dx:TreeListTextColumn>
<dx:TreeListTextColumn FieldName="LastName" VisibleIndex="1"></dx:TreeListTextColumn>
<dx:TreeListTextColumn FieldName="FirstName" VisibleIndex="2"></dx:TreeListTextColumn>
</Columns>
<SettingsBehavior AllowFocusedNode="true" FocusNodeOnLoad="false" />
<ClientSideEvents FocusedNodeChanged="OnFocusedNodeChange" />
</dx:ASPxTreeList>
<br />
<asp:AccessDataSource ID="ProductsDataSource" runat="server"
DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [ReportsTo] FROM [Employees]">
</asp:AccessDataSource>
</form>
</body>
</html>