Skip to main content
BuyLog In
ASP.NET MVC Extensions
Search in…
Docs > Components > Tree List > Data Editing > Batch Editing
All docs
V24.1
ASP.NET MVC Extensions
Prerequisites
Supported Browsers
What's Installed
Get Started
Upgrade to a New Version
Common Concepts
Components
Card View
Charting
Data and Image Navigation
Data Editors
Diagram
Docking and Popups
File Management
Gantt
Grid View
HTML Editor
Multi-Use Site Extensions
Pivot Grid
Reporting
Rich Text Editor
Scheduler
Site Navigation and Layout
Spell Checker
Spreadsheet
Tree List
Bind to Data
Data Editing
Edit Modes
Edit Form
Batch Editing
Validation
Visual Elements
Vertical Grid
Query Builder
Security Considerations
Redistribution and Deployment
Troubleshooting
Get More Help
.NET Framework API Reference
Client API Reference
Download CHM

Batch Editing

  • 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

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.

ASPxTreeList-BatchEditing

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”):

    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”):

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

    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”):

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

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:

Unsupported server-side API

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

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.