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
    [Expand]Data Representation Basics
    [Collapse]Data Editing
      Edit Form
      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 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

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.

Note

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

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