Adding and Deleting Nodes

• Dec 17, 2020
• 3 minutes to read

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.

  C#

  using DevExpress.Web.ASPxTreeList;
  
  protected void Page_Load(object sender, EventArgs e) {
      if (!IsPostBack && !IsCallback) {
          TreeListCommandColumn cmdCol = new TreeListCommandColumn("#");
          cmdCol.NewButton.Visible = true;
          ASPxTreeList1.Columns.Add(cmdCol);
      }
  }
  

  VB.NET

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
      If (Not IsPostBack) AndAlso (Not IsCallback) Then
          Dim cmdCol As TreeListCommandColumn = New TreeListCommandColumn("#")
          cmdCol.NewButton.Visible = True
          ASPxTreeList1.Columns.Add(cmdCol)
      End If
  End Sub
  

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.

Example

C#

protected void ASPxTreeList1_InitNewNode(object sender,
    DevExpress.Web.Data.ASPxDataInitNewRowEventArgs e) {
    e.NewValues["Budget"] = 500000;
    e.NewValues["Location"] = "Monterey";
}

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.

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.

Example: Delete Selected Nodes

JS

<dxe:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False"
    CssFilePath="~/App_Themes/Glass/{0}/styles.css"
    CssPostfix="Glass" OnClick="ASPxButton1_Click" Text="Delete Selected"
    EnableClientSideAPI="True">
    <ClientSideEvents Click="function(s, e) {
        treeList.PerformCustomCallback('');
    }" />
</dxe:ASPxButton>

C#

using DevExpress.Web.ASPxTreeList;

protected void Page_Load(object sender, EventArgs e) {
    ASPxTreeList1.SettingsEditing.AllowRecursiveDelete = true;
}
protected void ASPxTreeList1_CustomCallback(object sender,
TreeListCustomCallbackEventArgs e) {
    foreach (TreeListNode node in ASPxTreeList1.GetSelectedNodes())
        ASPxTreeList1.DeleteNode(node.Key);
    ASPxTreeList1.DataBind();
}

VB.NET

Imports DevExpress.Web.ASPxTreeList

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    ASPxTreeList1.SettingsEditing.AllowRecursiveDelete = True
End Sub
Protected Sub ASPxTreeList1_CustomCallback(ByVal sender As Object,_
ByVal e As TreeListCustomCallbackEventArgs)
    For Each node As TreeListNode In ASPxTreeList1.GetSelectedNodes()
        ASPxTreeList1.DeleteNode(node.Key)
    Next node
    ASPxTreeList1.DataBind()
End Sub