Batch Editing

• Jul 15, 2024
• 6 minutes to read

The ASP.NET MVC Tree List extension allows users to modify a batch of tree list data on the client side and send it to the server in a single request.

• Overview
• Enabling Batch Data Editing in the Tree List
• Batch Edit Mode Limitations

Overview

In batch editing mode, in-line editors are used to edit tree list data. All user data modifications are maintained on the client. Click Update to save changes on the server side, or Cancel to discard them.

Set the column’s TreeListColumnEditFormSettings.Visible (through MVCxTreeListColumn.EditFormSettings.Visible) property to false to prevent an end-user from editing column cells. In this case, column cells cannot switch to edit mode. When an end-user navigates through cells using the TAB key, such column cells are skipped. In contrast to the aforementioned property, the TreeListColumnEditFormSettings.Visible setting allows you to hide a tree list column on the client side but keeps this column editable using the batch edit API.

Note

As the tree list modifies its data on the client side in batch edit mode, the server-side ASPxTreeList.StartEdit (through MVCxTreeList.StartEdit) and ASPxTreeList.StartEditNewNode (through MVCxTreeList.StartEditNewNode) methods are not in effect. Additionally, the client-side ASPxClientTreeList.StartEditNewNode (through MVCxClientTreeList.StartEditNewNode) method does not perform a callback.

The tree list displays a “confirm” message before a tree list callback is performed if it contains modified data. Customize the message text using the TreeListSettingsText.ConfirmOnLosingBatchChanges (through TreeListSettings.SettingsText.ConfirmOnLosingBatchChanges) property, or disable it by setting the GridBatchEditSettings.ShowConfirmOnLosingChanges (by setting the MVCxTreeList.SettingsEditing.BatchEditSettings.ShowConfirmOnLosingChanges) property to false.

The TreeListBatchEditSettings.EditMode (through TreeListSettings.SettingsEditing.BatchEditSettings.EditMode) property allows you to specify which control element (data cell or node) to use for data editing.

Enabling Batch Data Editing in the Tree List

Enable the Tree List batch editing functionality using one of the following ways.

1. Add a controller action method to implement the following data record operations: add new records, save updated records and delete existing records within a data source.

   This controller action method obtains a MVCxTreeListBatchUpdateValues<T, S> object as a parameter. The MVCxTreeListBatchUpdateValues<T, S> object contains the following items.

   Item	Description
   MVCxBatchUpdateValues<T, S>.DeleteKeys	Contains a list of keys that correspond to tree list records deleted on the client side in batch edit mode.
   MVCxBatchUpdateValues<T, S>.EditorErrors	Provides access to the data source items dictionary and the corresponding ModelStateDictionary items.
   MVCxBatchUpdateValues<T, S>.Insert	Contains a list of objects that are the tree list records added on the client side in batch edit mode.
   MVCxBatchUpdateValues<T, S>.Update	Contains a list of tree list data items updated on the client side in batch edit mode.

   The action method applies all changes obtained from the client side to the data source and returns the TreeList’s Partial View.

   Controller code (“HomeController”):

   C#

   public ActionResult BatchEditingUpdateModel(MVCxTreeListBatchUpdateValues<EditablePost, int> updateValues, BatchEditingDemoOptions options) {
           foreach (var newNode in updateValues.InsertNodes) {
               InsertNodesRecursive(newNode, null, updateValues);
           }
           foreach (var post in updateValues.Update) {
               if (updateValues.IsValid(post))
                   UpdatePost(post, updateValues);
           }
           foreach (var postID in updateValues.DeleteKeys) {
               DeletePost(postID, updateValues);
           }
           return BatchEditingPartial(options);
       }
       protected void InsertNodesRecursive(MVCxTreeListNodeInfo<EditablePost> node, int? parentKey, MVCxTreeListBatchUpdateValues<EditablePost, int> updateValues) {
           if (updateValues.IsValid(node.DataItem)) {
               try {
                   if (!node.DataItem.ParentID.HasValue)
                       node.DataItem.ParentID = parentKey;
                   NewsGroupsProvider.InsertPost(node.DataItem);
                   foreach (var childNode in node.ChildNodes) {
                       InsertNodesRecursive(childNode, node.DataItem.PostID, updateValues);
                   }
               } catch (Exception e) {
                   updateValues.SetErrorText(node.DataItem, e.Message);
               }
           }
       }
   

2. Define callback route values within the PartialView.

   Navigate to the Partial View that contains the Tree List code. In the tree list settings, define the callback routing logic to handle tree list callbacks for data modifications in batch edit mode. Set the TreeListSettingsEditing.Mode (through TreeListSettings.SettingsEditing.Mode) property to Batch.

   Partial View code (“_TreeListViewPartial”):

   Razor

   @Html.DevExpress().TreeList(settings => {
       settings.Name = "treeList";
       settings.CallbackRouteValues = new { Controller = "Editing", Action = "BatchEditingPartial" };
       settings.SettingsEditing.BatchUpdateRouteValues = new { Controller = "Editing", Action = "BatchEditingUpdateModel" };
   
       settings.SettingsEditing.Mode = TreeListEditMode.Batch;
       settings.SettingsEditing.AllowRecursiveDelete = true;
       settings.SettingsEditing.BatchEditSettings.StartEditAction = BatchEditingOptions.StartEditAction;
       settings.SettingsEditing.BatchEditSettings.EditMode = BatchEditingOptions.EditMode;    
   ...
   }).SetEditErrorText(ViewData["EditNodeError"] as string).Bind(Model).GetHtml()
   

   Note that it’s necessary to assign DevExpressEditorsBinder to the ModelBinders.Binders.DefaultBinder property to replace the global default model binder.

   Global.asax:

   C#

   protected void Application_Start(){
       ...            
       ModelBinders.Binders.DefaultBinder = new DevExpress.Web.Mvc.DevExpressEditorsBinder();
   }
   

3. Enable the command column and command items.

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

   Note

   Note that you need to add the toolbar manually to display the Update and Cancel buttons.

   Partial View code (“_TreeListViewPartial”):

   Razor

   @Html.DevExpress().TreeList(settings => {
       settings.Name = "treeList";
       settings.CallbackRouteValues = new { Controller = "Editing", Action = "BatchEditingPartial" };
       settings.SettingsEditing.BatchUpdateRouteValues = new { Controller = "Editing", Action = "BatchEditingUpdateModel" };
   
       settings.SettingsEditing.Mode = TreeListEditMode.Batch;
       settings.SettingsEditing.AllowRecursiveDelete = true;
   
       settings.Toolbars.Add(t => {
           t.ItemAlign = GridToolbarItemAlign.Right;
           t.Position = GridToolbarPosition.Bottom;
           t.Items.Add(ti => ti.Command = TreeListToolbarCommand.Update);
           t.Items.Add(ti => ti.Command = TreeListToolbarCommand.Cancel);
       });
   
       settings.Columns.Add("From");
       settings.Columns.Add("Subject");
       settings.Columns.Add(c => {
           c.FieldName = "PostDate";
           c.Caption = "Date";
           c.EditorProperties().DateEdit(p => {
               p.DisplayFormatString = "dd/MM/yyyy hh:mm tt";
               p.DisplayFormatInEditMode = true;
               p.EditFormat = EditFormat.DateTime;
           });
       });
       settings.Columns.Add("IsNew", MVCxTreeListColumnType.CheckBox);
       settings.Columns.Add("HasAttachment", MVCxTreeListColumnType.CheckBox);
   
       settings.CommandColumn.Visible = true;
       settings.CommandColumn.ShowNewButtonInHeader = true;
       settings.CommandColumn.NewButton.Visible = true;
       settings.CommandColumn.DeleteButton.Visible = true;
   ...
   }).Bind(Model).GetHtml()
   

Appearance Customization

To customize the modified data item’s visual presentation, use the following TreeListSettings.Styles property settings.

• TreeListStyles.BatchEditModifiedCell - Contains the modified data cells’ style settings.
• TreeListDataColumn.BatchEditModifiedCellStyle - Contains the modified data cells’ style settings in a certain data column only.
• TreeListStyles.BatchEditNewNode - Contains style settings for newly added nodes.
• TreeListStyles.BatchEditDeletedNode - Contains style settings for deleted nodes.

Online Demo

TreeList - Batch Editing and Updating

Batch Edit Mode Limitations

The following TreeList’s features and API members are not in effect in batch edit mode, since all user changes are maintained on the client side.

Unsupported features

The features below are not supported when the tree list is in batch edit mode:

• The select check boxes of newly created nodes are disabled until the nodes are saved.
• You cannot use the UploadControl to modify new row values in batch edit mode.

• The BinaryImage control does not have any built-in functionality allowing you to determine if the editor is focused (the client-side ASPxClientEdit.GotFocus and ASPxClientEdit.LostFocus events do not work). This imposes the following limitations on using BinaryImage in batch edit mode:

  • Cell/node navigation doesn’t work for MVCxTreeListColumn of the MVCxTreeListColumnType.BinaryImage type.
  • When an end-user is editing a binary type column, the TreeList cannot switch to browse mode by clicking outside the control.

Unsupported server-side API

The following server-side events are not in effect when the tree list is in batch edit mode:

• TreeListSettings.InitNewNode
• TreeListSettings.CellEditorInitialize

The ValidationSettings.SetFocusOnError property has no effect, because the extension handles errors at the node/cell level. Use the GridBatchEditSettings.AllowEndEditOnValidationError property to keep focus on the editor until an end-user inputs a correct value.

• Unsupported client-side API

  The ASPxClientTreeList.IsEditing property is not in effect when the tree list is in batch edit mode.