[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Collapse]Tree List
   [Expand]Product Information
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Collapse]Data Editing
      Edit Form
      Batch Edit Mode
      Adding and Deleting Nodes
      Node Validation and Error Indication
    [Expand]Data Shaping and Manipulation
     Drag and Drop
    [Expand]Focus and Navigation
     Appearance Customization
     Save and Restore Client Layout
   [Expand]Visual Elements
   [Expand]Member Tables
  [Expand]Card View
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Adding and Deleting Nodes

Expanded Creating, Initializing and Saving New Nodes

End-users can create new nodes by clicking the New button, displayed within the Command Column.


By default, the New button is hidden. To display it, do the following:

  • Design Time

    Enable the 'Enable Inserting' task. This creates a command column (if not created), and displays the New button.

    The image below shows how to access the New button's settings at design time:

  • Runtime

    Create a Command Column, access the New button's settings via the TreeListCommandColumn.NewButton property and enable its TreeListCommandColumnButton.Visible option.

Once clicked, the ASPxTreeList is switched to edit mode, and enables an end-user to initialize node values.

To save the node, click Update.

If data entered by a user is valid, the new node is saved to the underlying data source and appended to the child node collection of the node whose New button has been clicked.

To create a root node, click the New button displayed within the command column's header. This button's visibility is specified by the TreeListCommandColumn.ShowNewButtonInHeader property.

To start edititng nodes in code, use the server ASPxTreeList.StartEditNewNode or client ASPxClientTreeList.StartEditNewNode method. These methods switch the ASPxTreeList to edit mode, and allow the values of the new node to be edited.


To add a new node in code, you need to add the corresponding record to a database. If the ASPxTreeList is bound to data created at runtime, you need to persist it somewhere (e.g. use the Session). Once added, you must rebind the ASPxTreeList using the DataBind method. For an example, see How to: Add New Nodes in Code (Bound Mode).

To initialize node values in code, handle the ASPxTreeList.InitNewNode event.

Expanded Example

After a new node has been added to the ASPxTreeList, the ASPxTreeList.NodeInserted event is raised. To cancel the insert operation, handle the ASPxTreeList.NodeInserting event.

You can also implement node validation. For information, see Node Validation and Error Indication.

Expanded Deleting Nodes

End-users can delete nodes via the Delete command. To do this in code, use the server ASPxTreeList.DeleteNode or client ASPxClientTreeList.DeleteNode method.

After a node has been deleted, the ASPxTreeList.NodeDeleted event is raised. To cancel the delete operation, handle the ASPxTreeList.NodeDeleting event.

To allow an end-user to cancel the delete operation, enable the TreeListSettingsEditing.ConfirmDelete option. In this case, when the user deletes a node, the Confirm Delete window is automatically displayed.

The text displayed within the Confirm Delete window can be specified via the TreeListSettingsText.ConfirmDelete property.

By default, parent nodes are not allowed to be deleted. When deleting a parent node the error message is displayed.

To allow delete parent nodes with their children, enable the TreeListSettingsEditing.AllowRecursiveDelete option.

Expanded Example: Delete Selected Nodes

Is this topic helpful?​​​​​​​