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
• Edit TreeList via the Client-Side API

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.

   This controller action method obtains a newly added object as a parameter. The action method adds a new record and returns the TreeList’s Partial View.

   Controller code (“HomeController”):

   C#

   // Handles tree list callbacks to add a new node.
   [HttpPost, ValidateInput(false)]
   public ActionResult TreeListPartialAddNew(WebApplicationEFTest.Models.Customer item)
   {
       var model = db.Customers;
       // Performs server-side model validation based on data annotation attributes.
       if (ModelState.IsValid)
       {
           try
           {
               // Adds a new item to a data source using the Entity Framework.
               model.Add(item);
               db.SaveChanges();
           }
           catch (Exception e)
           {
               // The ViewBag object passes an error message to the tree list's partial view and defines the error text in case of an exception.
               ViewBag.EditError = e.Message;
           }
       }
       else
           ViewBag.EditError = "Please, correct all errors.";
      // Returns the tree list's Partial View with a data model.
      return PartialView("_TreeListPartial", model.ToList());
   }
   

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

   This controller action method obtains an edited object as a parameter. The action method updates records and returns the Tree List’s Partial View.

   Controller code (“HomeController”):

   C#

   // Handles tree list callbacks to update an edited record.
   [HttpPost, ValidateInput(false)]
   public ActionResult TreeListPartialUpdate(WebApplicationEFTest.Models.Customer item)
   {
       var model = db.Customers;
       // Performs server-side model validation based on data annotation attributes.
       if (ModelState.IsValid)
       {
           try
           {
               // Updates an item within a data source using the Entity Framework.
               var modelItem = model.FirstOrDefault(it => it.CustomerID == item.CustomerID);
               if (modelItem != null)
               {
                   this.UpdateModel(modelItem);
                   db.SaveChanges();
               }
           }
           catch (Exception e)
           {
               // The ViewBag object passes an error message to the tree list's partial view and defines the error text in case of an exception.
               ViewBag.EditError = e.Message;
           }
       }
       else
           ViewBag.EditError = "Please, correct all errors.";
           // Returns the tree list's Partial View with a data model.
           return PartialView("_TreeListPartial", model.ToList());
   }
   

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

   This controller action method obtains the key value of the deleted record. The action method deletes records and returns the TreeList’s Partial View.

   Controller code (“HomeController”):

   C#

   // Handles tree list callbacks to delete a record.
   [HttpPost, ValidateInput(false)]
   public ActionResult TreeListPartialDelete(System.String CustomerID)
   {
       var model = db.Customers;
       if (CustomerID != null)
       {
           try
           {
               // Removes an item from a data source using the Entity Framework.
               var item = model.FirstOrDefault(it => it.CustomerID == CustomerID);
               if (item != null)
                   model.Remove(item);
               db.SaveChanges();
           }
           catch (Exception e)
           {
               // The ViewBag object passes an error message to the tree list's partial view and defines the error text in case of an exception.
               ViewBag.EditError = e.Message;
           }
       }
       // Returns the tree list's Partial View with a data model.
       return PartialView("_TreeListPartial", model.ToList());
   }
   

4. Define callback route values within the PartialView.

   Navigate to the Partial View that contains the TreeList code. In the tree list settings, define the callback routing logic to handle the tree list callbacks to add, update and delete records.

   Partial View code (“_TreeListPartial”):

   Razor

   @{
       var treeList = Html.DevExpress().TreeList(settings => {
           settings.Name = "TreeList";
           settings.CallbackRouteValues = new { Controller = "Home", Action = "TreeListPartial" };
           // Defines the callback routing logic to handle the tree list callbacks to add, update and delete records.
           settings.SettingsEditing.AddNewNodeRouteValues = new { Controller = "Home", Action = "TreeListPartialAddNew" };
           settings.SettingsEditing.UpdateNodeRouteValues = new { Controller = "Home", Action = "TreeListPartialUpdate" };
           settings.SettingsEditing.DeleteNodeRouteValues = new { Controller = "Home", Action = "TreeListPartialDelete" };
           // ...
       });
       if (ViewBag.EditError != null)
       {
           treeList.SetEditErrorText(ViewBag.EditError);
       }
   }
   @treeList.Bind(Model).GetHtml()
   

5. Enable the command column.

   Add a command column to the tree list’s column collection and specify which commands (New, Edit, Delete, Update, Cancel) end-users use to manipulate tree list data.

   Partial View code (“_TreeListPartial”):

   Razor

   @{
       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" };
           // Enables a command column.
           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");
       });
       if (ViewBag.EditError != null)
       {
           treeList.SetEditErrorText(ViewBag.EditError);
       }
   }
   @treeList.Bind(Model).GetHtml()
   

   Note that you can use the Tree List’s client-side API to add, edit and delete records in addition to using the built-in edit form.

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:

Method	Description
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.

Razor

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

• Edit Modes
• Edit Form
• Batch Editing
• Validation