The requested page is not available for the requested platform. You are viewing the content for Default platform.

Adding and Deleting Nodes

  • 3 min to read

Creating, Initializing and Saving New Nodes

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

cdAddNewNodes_1

 

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.

    cdAddNewNodes_2

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

    cdAddNewNodes

  • Runtime

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

    
    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);
        }
    }
    

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

cdAddNewNodes_3

To save the node, click Update.

cdAddNewNodes_4

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.

cdAddNewNodes_5

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.

cdAddNewNodes_6

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


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.

cdAddNewNodes_delete

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.

RecursiveDelete

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

Example: Delete Selected Nodes

exDeleteSelectedNodes


<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>