ContextQMD
Back to Devexpress

Cell Editing in Blazor TreeList

blazor-405166-components-treelist-editing-and-validation-edit-modes-edit-cell.md

latest20.5 KB
Original Source

Cell Editing in Blazor TreeList

  • Sep 25, 2025
  • 10 minutes to read

In EditCell mode, users can click a data cell to display its in-place editor. When focus moves to another row, the control validates pending user input and saves changes.

Run Demo: Edit CellRun Demo: Edit BatchView Example: Implement Batch Data Editing Using Entity Framework Core

The following shortcuts are available in EditCell mode:

Enter or Shift+EnterOpens an in-place editor for the focused cell, if an editor is not already open. If an in-place editor is open, the shortcut applies the changes and closes the editor. Focus can then move to the next cell (Enter) or to the previous cell (Shift+Enter) within the current row or column (see the EnterKeyDirection property).EscWhen a cell editor is visible, a user can press the Esc key to hide the editor and discard changes made in this cell. If the user presses Esc when the editor is hidden, the TreeList discards all changes made in the row and cancels row editing.Tab or Shift+TabHides the editor in the current cell, focuses the next or previous data cell, and shows an editor in the newly focused cell.

Enable Editing

Follow the steps below to enable cell editing:

  1. Set the EditMode property to EditCell.

  2. If your data object has a primary key, assign it to the KeyFieldName property. Otherwise, the TreeList uses standard .NET value equality comparison to identify data items.

  3. Handle the CustomizeEditModel event to initialize an edit model for new data rows.

  4. Handle EditModelSaving and DataItemDeleting events to save changes and reload TreeList data.

  5. (Optional) Declare a DxTreeListCommandColumn object in the Columns template to display the command column.

  6. (Optional). Use the EditNewRootRowPosition property to display the new item row or change the position of cell editors displayed for new root nodes.

razor
@inject EmployeeTaskService EmployeeTaskService

<DxTreeList Data="TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            EditMode="TreeListEditMode.EditCell"
            EditModelSaving="TreeList_EditModelSaving"
            DataItemDeleting="TreeList_DataItemDeleting"
            CustomizeEditModel="TreeList_CustomizeEditModel">
    <Columns>
        <DxTreeListCommandColumn EditButtonVisible="false"
                                 CancelButtonVisible="false"
                                 SaveButtonVisible="false" />
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
</DxTreeList>

@code {
    List<EmployeeTask> TreeListData { get; set; }

    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }
    void TreeList_CustomizeEditModel(TreeListCustomizeEditModelEventArgs e) {
        if(e.IsNew) {
            var newTask = (EmployeeTask)e.EditModel;
            newTask.Id = TreeListData.Max(x => x.Id) + 1;
            if(e.ParentDataItem != null)
                newTask.ParentId = ((EmployeeTask)e.ParentDataItem).Id;
        }
    }
    async Task TreeList_EditModelSaving(TreeListEditModelSavingEventArgs e) {
        if(e.IsNew)
            TreeListData.Add((EmployeeTask)e.EditModel);
        else
            e.CopyChangesToDataItem();
    }
    async Task TreeList_DataItemDeleting(TreeListDataItemDeletingEventArgs e) {
        TreeListData.Remove((EmployeeTask)e.DataItem);
    }
}
csharp
public class EmployeeTask {
    public int Id { get; set; }
    public int ParentId { get; set; }
    public string Name { get; set; }
    public string EmployeeName { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime DueDate { get; set; }
    public int Progress { get; set; }
    public EmployeeTask() { }
    public EmployeeTask(
        int id,
        int parentId,
        string name,
        string employeeName,
        DateTime startDate,
        DateTime dueDate,
        int progress
        )
    {
        Id = id;
        ParentId = parentId;
        Name = name;
        EmployeeName = employeeName;
        StartDate = startDate;
        DueDate = dueDate;
        Progress = progress;
    }
}
csharp
public class EmployeeTaskService {
    public List<EmployeeTask> GenerateData() {
        return new List<EmployeeTask>() {
            new EmployeeTask(1, 0, "Simplify & Clarify Product Messaging", "John Heart", new DateTime(2018, 4, 3), new DateTime(2018, 4, 14), 14),
            new EmployeeTask(2, 1, "Prepare Financial Reports", "Samantha Bright", new DateTime(2018, 4, 3), new DateTime(2018, 4, 7), 17),
            new EmployeeTask(3, 1, "Prepare Marketing Plan", "Arthur Miller", new DateTime(2018, 4, 7), new DateTime(2018, 4, 14), 11),
            new EmployeeTask(4, 0, "Create Action Plan to Improve Customer Engagement", "Robert Reagan", new DateTime(2017, 8, 8), new DateTime(2018, 4, 8), 23),
            new EmployeeTask(5, 4, "Update Personnel Files", "Greta Sims", new DateTime(2017, 8, 8), new DateTime(2017, 10, 18), 100),
            new EmployeeTask(6, 4, "Review Health Insurance Options", "Brett Wade", new DateTime(2017, 9, 27), new DateTime(2017, 11, 10), 37),
            new EmployeeTask(7, 4, "Choose Between PPO and HMO Health Plan", "Sandra Johnson", new DateTime(2017, 12, 13), new DateTime(2018, 3, 23), 17),
            new EmployeeTask(8, 4, "Update Google Adwords Strategy", "Ed Holmes", new DateTime(2017, 8, 23), new DateTime(2017, 12, 23), 45),
            new EmployeeTask(9, 4, "Create New Brochure Design", "Barb Banks", new DateTime(2018, 1, 3), new DateTime(2018, 3, 14), 17),
            new EmployeeTask(10, 4, "Obtain Price Quote for New Brochure", "Kevin Carter", new DateTime(2018, 2, 1), new DateTime(2018, 3, 15), 18),
            new EmployeeTask(11, 4, "Brochure Design Review", "Cindy Stanwick", new DateTime(2017, 8, 22), new DateTime(2017, 10, 28), 4),
            new EmployeeTask(12, 4, "Review Website Redesign Strategy", "Sammy Hill", new DateTime(2017, 9, 16), new DateTime(2018, 3, 6), 73),
            new EmployeeTask(13, 4, "Roll Out New Website", "Davey Jones", new DateTime(2017, 11, 7), new DateTime(2018, 2, 6), 9),
            new EmployeeTask(14, 4, "Update Sales/Marketing Strategy", "Victor Norris", new DateTime(2017, 12, 13), new DateTime(2018, 4, 2), 5),
            new EmployeeTask(15, 4, "Update Sales/Revenue Report", "Mary Stern", new DateTime(2017, 12, 25), new DateTime(2018, 4, 2), 4),
            new EmployeeTask(16, 4, "Direct vs Online Sales Comparison Report", "Robin Cosworth", new DateTime(2018, 1, 2), new DateTime(2018, 3, 20), 14),
            new EmployeeTask(17, 4, "Review Sales Report and Approve Modifications", "Kelly Rodriguez", new DateTime(2017, 9, 4), new DateTime(2017, 10, 30), 8),
            new EmployeeTask(18, 4, "Update R&D Strategy", "James Anderson", new DateTime(2017, 11, 13), new DateTime(2017, 12, 4), 12),
            new EmployeeTask(19, 4, "Discuss Updated R&D Strategy", "Antony Remmen", new DateTime(2017, 10, 29), new DateTime(2017, 12, 31), 14),
            new EmployeeTask(20, 4, "Update QA Strategy", "Olivia Peyton", new DateTime(2017, 10, 31), new DateTime(2017, 11, 2), 18),
            new EmployeeTask(21, 4, "Schedule Training Events", "Taylor Riley", new DateTime(2017, 11, 19), new DateTime(2018, 4, 7), 21),
            new EmployeeTask(22, 4, "Approve Hiring of John Jeffers", "Amelia Harper", new DateTime(2018, 1, 7), new DateTime(2018, 4, 8), 10),
            new EmployeeTask(23, 0, "Increase Average Subscription Price", "Wally Hobbs", new DateTime(2017, 8, 9), new DateTime(2017, 9, 13), 96),
            new EmployeeTask(24, 23, "Update Non-Compete Agreements", "Brad Jameson", new DateTime(2017, 8, 9), new DateTime(2017, 9, 3), 96),
            new EmployeeTask(25, 23, "Update Employee Records with New NDA", "Karen Goodson", new DateTime(2017, 8, 23), new DateTime(2018, 9, 10), 100)
        };
    }
}
csharp
// ...
builder.Services.AddSingleton<EmployeeTaskService>();

Display New Item Row

The new item row is an empty row that allows users to add new root nodes. Set the EditNewRootRowPosition property to FixedOnTop to display the new item row fixed to the top of the current page. Set this property to LastRow to display this row on the last page after the last data row.

razor
<DxTreeList Data="TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            EditMode="TreeListEditMode.EditCell"
            EditModelSaving="TreeList_EditModelSaving"
            DataItemDeleting="TreeList_DataItemDeleting"
            CustomizeEditModel="TreeList_CustomizeEditModel"
            EditNewRowPosition="TreeListEditNewRowPosition.FixedOnTop">
    <Columns>
        *@* ... *@
    </Columns>
</DxTreeList>

Users can press Tab or Shift+Tab keys to navigate between the new item row’s data cells. If focus moves beyond the last/first data cell, TreeList focuses the cell on the opposite end and validates user input. Depending on validation results, the following variants are possible:

  • If validation fails, the component displays error icons.
  • If validation succeeds, the component saves changes and starts editing a new root node.

Start Editing on Typing

The TreeList component starts cell editing after a user clicks a cell or focuses it and presses Enter. Enable the EditOnKeyPress property to additionally enter edit mode once a user starts typing a new value:

razor
<DxTreeList Data="TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            EditMode="TreeListEditMode.EditCell"
            EditModelSaving="TreeList_EditModelSaving"
            DataItemDeleting="TreeList_DataItemDeleting"
            CustomizeEditModel="TreeList_CustomizeEditModel"
            EditOnKeyPress="true">
    <Columns>
        *@* ... *@
    </Columns>
</DxTreeList>

Limitations

The EditCell mode has the following specifics and limitations:

  • The mode is compatible only with DevExpress Blazor editors.
  • The TreeList component does not support this mode when you use a GridDevExtremeDataSource.
  • After a user performs a data shaping operation that hides the edited row from the view (for instance, after a user collapses the parent of the edited row), the TreeList validates row values. If validation succeeds, the TreeList saves changes. If validation fails, the TreeList discards changes and displays a notification message: “Unsaved changes were discarded”.
  • During edit operations, the TreeList applies user changes only to the edit model and keeps the data item unchanged. To display modified values in the CellDisplayTemplate or DataColumnCellDisplayTemplate, use the edit model’s field values instead of the template context’s DataItem, DisplayText, and Value properties. You can obtain the edit model as follows:
razor
<DxTreeListDataColumn FieldName="FirstName">
    <CellDisplayTemplate Context="displayContext">
        @{
            string value;
            if (displayContext.TreeList.IsEditingRow(displayContext.VisibleIndex)) {
                var editModel = (Employee)displayContext.TreeList.GetEditContext().Model;
                value = editModel.FirstName;
            }
            else
                value = displayContext.DisplayText;
        }
        <span>@value</span>
    </CellDisplayTemplate>
</DxTreeListDataColumn>

This section contains comprehensive editing-related API references.

Show API References

DxTreeList API MemberTypeDescription
CustomValidatorsPropertyAllows you to declare custom validator components.
DataColumnCellEditTemplatePropertyAllows you to replace automatically generated editors with custom content in all edit cells displayed for data columns.
EditModePropertySpecifies how users can edit TreeList data.
EditNewRootRowPositionPropertySpecifies the position of UI elements used to create new root nodes.
EditOnKeyPressPropertyIn EditCell mode, specifies whether cell editing starts once a user begins typing a new value.
ValidationEnabledPropertySpecifies whether the TreeList validates user input.
CancelEditAsync()MethodCancels row editing and discards changes.
GetColumnEditSettings<T>(String)MethodReturns editor settings of the column bound to the specified data source field.
GetEditContext()MethodReturns the edit context.
IsEditing()MethodReturns whether the TreeList is being edited.
IsEditingNewRow()MethodReturns whether a new TreeList row is being edited.
IsEditingRow(Int32)MethodReturns whether the specified TreeList row is being edited.
SaveChangesAsync()MethodTriggers validation and raises the EditModelSaving event if validation succeeds. The method immediately raises this event if validation is disabled.
ShowRowDeleteConfirmation(Int32)MethodDisplays the delete confirmation dialog for the specified row. If a user confirms the operation, the method raises the DataItemDeleting event.
StartEditNewRowAsync(String)MethodStarts editing a new root node.
StartEditNewRowAsync(Int32, String)MethodStarts editing a new child node of the row with the specified visible index.
StartEditRowAsync(Int32, String)MethodStarts editing the row with the specified visible index.
CustomizeDataRowEditorEventAllows you to customize a cell editor in a data row.
CustomizeEditModelEventAllows you to customize an automatically generated edit model or create a custom edit model.
DataItemDeletingEventFires after a user confirms the delete operation in the delete confirmation dialog.
EditCancelingEventFires before the TreeList cancels the edit operation and discards changes.
EditModelSavingEventFires if validation succeeds after a user saves changes or you call the SaveChangesAsync() method.
EditStartEventFires before the TreeList starts editing a row.
DxTreeListCommandColumn API MemberTypeDescription
CancelButtonVisiblePropertySpecifies whether the command column displays the Cancel button in EditRow or EditCell edit mode.
CellDisplayTemplatePropertySpecifies a template used to display command column cells in display mode.
CellEditTemplatePropertySpecifies a template used to display the command column’s edit cell.
DeleteButtonVisiblePropertySpecifies whether the command column displays Delete buttons.
DisplayModePropertySpecifies whether command buttons display icons, captions, or both.
EditButtonVisiblePropertySpecifies whether the command column displays Edit buttons.
HeaderTemplatePropertySpecifies a template used to display the command column header.
NewButtonVisiblePropertySpecifies whether the command column displays New buttons.
SaveButtonVisiblePropertySpecifies whether the command column displays the Save button in EditRow or EditCell edit mode.
DxTreeListDataColumn API MemberTypeDescription
CellEditTemplatePropertyAllows you to replace an automatically generated editor with custom content in the column’s edit cell.
DataRowEditorVisiblePropertySpecifies whether to render the editor associated with this column in the column edit cell, edit form, or pop-up edit form.
EditSettingsPropertyAllows you to customize the editor associated with this column.
ReadOnlyPropertySpecifies whether a user can change the column editor value when the TreeList is in edit mode.