ContextQMD
Back to Devexpress

Data Editing

aspnetmvc-120267-components-tree-list-data-editing.md

latest4.7 KB
Original Source

Data Editing

  • May 24, 2023
  • 6 minutes to read

The DevExpress MVC TreeList (TreeListExtension) extension provides the built-in data editing functionality. This topic describes how to edit TreeList data.

Note

To follow the steps described below, use a data-bound TreeList extension.

Enable Data Editing within the TreeList

You can edit TreeList data in the following way.

  1. Add the controller action method to add new nodes to a data source.

  2. Add the controller action method to save updated records to a data source.

  3. Add the controller action method to delete existing records from a data source.

  4. Define callback route values within the PartialView.

  5. Enable the command column.

Editing TreeList via the Client-Side API

TreeList provides a full-featured client-side API that allows you to manipulate the edit form using JS code. The table below lists the available methods:

MethodDescription
ASPxClientTreeList.StartEditNewNode (via MVCxClientTreeList .StartEditNewNode )Switches the TreeList to edit mode and allows users to edit a newly created root node.
ASPxClientTreeList.StartEdit (via MVCxClientTreeList. StartEdit )Switches the TreeList to edit mode.
ASPxClientTreeList.SetEditValue (via MVCxClientTreeList .SetEditValue )Specifies an edit cell value.
ASPxCardView.IsEditing (via MVCxClientTreeList .IsEditing )Indicates whether the TreeList extension is in edit mode.
ASPxClientTreeList.UpdateEdit (via MVCxClientTreeList .UpdateEdit )Saves all changes and switches the TreeList extension to browse mode.
ASPxClientTreeList.CancelEdit (via MVCxClientTreeList .CancelEdit )Discards all changes and switches the TreeList extension to browse mode.
ASPxClientTreeList.DeleteNode (via MVCxClientTreeList .DeleteNode )Deletes a specified node.

Example

The following example illustrates how to handle the client-side ASPxClientTreeList.NodeDblClick (via MVCxClientTreeList .NodeDblClick ) event to switch the TreeList to edit mode. The event handler calls the ASPxClientTreeList.StartEditNewNode (via MVCxClientTreeList .StartEditNewNode ) method that receives the processed node’s visible index and invokes an edit form.

cshtml
@{
var treeList = Html.DevExpress().TreeList(settings => {
    settings.Name = "TreeList";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "TreeListPartial" };

    settings.SettingsEditing.AddNewNodeRouteValues = new { Controller = "Home", Action = "TreeListPartialAddNew" };
    settings.SettingsEditing.UpdateNodeRouteValues = new { Controller = "Home", Action = "TreeListPartialUpdate" };
    settings.SettingsEditing.DeleteNodeRouteValues = new { Controller = "Home", Action = "TreeListPartialDelete" };

    settings.CommandColumn.Visible = true;
    settings.CommandColumn.ShowNewButton = true;
    settings.CommandColumn.ShowDeleteButton = true;
    settings.CommandColumn.ShowEditButton = true;

    settings.KeyFieldName = "CustomerID";
    settings.Columns.Add("CompanyName");
    settings.Columns.Add("ContactName");
    settings.Columns.Add("ContactTitle");
    settings.Columns.Add("Phone");
    settings.ClientSideEvents.NodeDblClick = "function(s, e) { s.StartEditNewNode(e.visibleIndex); }";
});
if (ViewBag.EditError != null)
{
    treeList.SetEditErrorText(ViewBag.EditError);
}
}
@treeList.Bind(Model).GetHtml()

Concepts