Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Collapse]Tree List
   [Expand]Product Information
   [Collapse]Concepts
    [Expand]Binding to Data
    [Collapse]Data Representation Basics
     [Expand]Columns
     [Collapse]Nodes
       Expanding and Collapsing Nodes
       Using the Node Iterator
       Preview
      Tree Generation Algorithm in the ASPxTreeList
    [Expand]Data Editing
    [Expand]Data Shaping and Manipulation
     Drag and Drop
    [Expand]Focus and Navigation
     Appearance Customization
     Save and Restore Layout
    [Expand]Templates
     Toolbars
   [Expand]Visual Elements
   [Expand]Examples
   [Expand]Member Tables
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Expanding and Collapsing Nodes

Parent nodes display expand buttons that allow end-users to show/hide their children. End-users can expand or collapse nodes by clicking these buttons. It is also possible to expand/collapse nodes by clicking or double-clicking them. Use the TreeListSettingsBehavior.ExpandCollapseAction option to specify how end-users can expand/collapse nodes.

The ASPxTreeList provides the server-side API and client-side API to expand and collapse nodes in code.

 

Expanded Expanding Nodes

To expand a node, set its TreeListNode.Expanded property to true, or call the ASPxClientTreeList.ExpandNode client method. To expand all nodes, use the ASPxTreeList.ExpandAll method, or the client ASPxClientTreeList.ExpandAll method.

You can also expand all nodes residing at the root level down to the required nesting level using the ASPxTreeList.ExpandToLevel method.

The image below shows the result:

Before expanding a node, the ASPxTreeList raises the client-side ASPxClientTreeList.NodeExpanding event and the server-side ASPxTreeList.NodeExpanding event. This event allows you to prevent individual nodes from being expanded by end-users. After a node has been expanded, the ASPxTreeList.NodeExpanded event is raised.

Expanded Collapsing Nodes

Use the TreeListNode.Expanded property, or the client ASPxClientTreeList.CollapseNode method, to collapse a node. To collapse all expanded rows, use the server-side ASPxTreeList.CollapseAll method or the client-side ASPxClientTreeList.CollapseAll method.

Before a node is collapsed, the ASPxTreeList raises the client-side ASPxClientTreeList.NodeCollapsing event and the server-side ASPxTreeList.NodeCollapsing event. These events allow you to prevent individual nodes from being collapsed. After a node has been collapsed, the ASPxTreeList.NodeCollapsed event is raised.

Note

The client-side ASPxClientTreeList.NodeExpanding and ASPxClientTreeList.NodeCollapsing events are only raised 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.

Expanded Expanding and Collapsing Nodes via a Context Menu

This example demonstrates how to display a context menu. When an end-user right-clicks within the ASPxTreeList, the client-side ASPxClientTreeList.ContextMenu event is fired. In this example, the context menu is invoked when a node is right-clicked.

The image below shows the result:

How would you rate this topic?​​​​​​​