ContextQMD
Back to Devexpress

Pop-Up and Inline Edit Forms in Blazor TreeList

blazor-405167-components-treelist-editing-and-validation-edit-modes-edit-forms.md

latest21.0 KB
Original Source

Pop-Up and Inline Edit Forms in Blazor TreeList

  • Jan 20, 2026
  • 9 minutes to read

In EditForm or PopupEditForm mode, the TreeList displays an inline or pop-up edit form instead of the edited data row. Users can click command buttons to create, modify, and delete TreeList rows.

Run Demo: Edit Forms

Enable Editing

The built-in edit form shows only the predefined Save and Cancel buttons. Use the EditFormTemplate to populate the edit form with editors. Call the GetEditor(String) method to add an automatically-generated column editor to the edit form.

Note

When you place a templated component in the edit form template, a Razor error may occur. To prevent this error, specify the Context parameter explicitly either for the TreeList template or for the nested component.

Once you define the edit form content, follow the steps below to enable data editing:

  1. Set the EditMode property to EditForm or PopupEditForm.
  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. Declare a DxTreeListCommandColumn object in the Columns template to display the command column.
  4. Handle the CustomizeEditModel event to initialize an edit model for new data rows.
  5. Handle EditModelSaving and DataItemDeleting events to save changes and reload TreeList data. Refer to the following topic for additional information: Edit Model in Blazor TreeList.
  6. (Optional). Use the EditNewRootRowPosition property to display the new item row or change the position of the inline edit form displayed for new root nodes.
razor
@inject EmployeeTaskService EmployeeTaskService

<DxTreeList Data="TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            EditMode="TreeListEditMode.EditForm"
            CustomizeEditModel="TreeList_CustomizeEditModel"
            EditModelSaving="TreeList_EditModelSaving"
            DataItemDeleting="TreeList_DataItemDeleting">
    <Columns>
        <DxTreeListCommandColumn />
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout CssClass="w-100">
            <DxFormLayoutItem Caption="Task:" ColSpanMd="6">
                @EditFormContext.GetEditor("Name")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Employee Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("EmployeeName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Start Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("StartDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Due Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("DueDate")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</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>();

Customize Pop-Up Edit Form

You can set the EditMode property to PopupEditForm to display the edit form in a pop-up window. Specify the PopupEditFormCssClass property to apply a CSS class to the pop-up edit form. The PopupEditFormHeaderText property allows you to change text in the edit form header.

The following code snippet changes the pop-up edit form’s size and header text:

razor
<DxTreeList Data="TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId" 
            EditMode="TreeListEditMode.PopupEditForm"
            PopupEditFormHeaderText="Edit Task"
            PopupEditFormCssClass="my-style"
            CustomizeEditModel="TreeList_CustomizeEditModel"
            EditModelSaving="TreeList_EditModelSaving"
            DataItemDeleting="TreeList_DataItemDeleting">
    <Columns>
        <DxTreeListCommandColumn />
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout CssClass="w-100">
            <DxFormLayoutItem Caption="Task:" ColSpanMd="6">
                @EditFormContext.GetEditor("Name")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Employee Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("EmployeeName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Start Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("StartDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Due Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("DueDate")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxTreeList>
css
.my-style {
    min-width: 800px;
}

Hide Predefined Edit Form Buttons

Disable the EditFormButtonsVisible option to hide the predefined Save and Cancel buttons. Instead of them, you can implement your own buttons. Note the following specifics:

  • Instead of the Save button, you can use a submit button or a button that calls the SaveChangesAsync method on click.

  • To discard changes and hide the edit form, call the CancelEditAsync method in a custom button’s click event handler.

The following example displays custom Save and Cancel buttons in the edit form:

razor
<DxTreeList @ref="MyTreeList"
            Data="TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            EditMode="TreeListEditMode.EditForm"
            CustomizeEditModel="TreeList_CustomizeEditModel"
            EditModelSaving="TreeList_EditModelSaving"
            DataItemDeleting="TreeList_DataItemDeleting"
            EditFormButtonsVisible="false">
    <Columns>
        <DxTreeListCommandColumn />
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout CssClass="w-100">
            <DxFormLayoutItem Caption="Task:" ColSpanMd="6">
                @EditFormContext.GetEditor("Name")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Employee Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("EmployeeName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Start Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("StartDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Due Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("DueDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem ColSpanMd="12">
                <DxButton SubmitFormOnClick="true" Text="Save" />
                <DxButton Click="@(() => MyTreeList.CancelEditAsync())" Text="Cancel" />
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxTreeList>

This section contains comprehensive editing-related API references.

Show API References

DxTreeList API MemberTypeDescription
CustomValidatorsPropertyAllows you to declare custom validator components.
EditFormButtonsVisiblePropertySpecifies whether the edit form contains predefined Save and Cancel buttons.
EditFormTemplatePropertySpecifies the template used to display the edit form.
EditModePropertySpecifies how users can edit TreeList data.
EditNewRootRowPositionPropertySpecifies the position of UI elements used to create new root nodes.
PopupEditFormCssClassPropertyAssigns a CSS class to the pop-up edit form.
PopupEditFormHeaderTextPropertySpecifies text displayed in the pop-up edit form’s header.
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
CellDisplayTemplatePropertySpecifies a template used to display command column cells in display mode.
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.
DxTreeListDataColumn API MemberTypeDescription
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.