Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxTreeList.EditFormTemplate Property

Specifies the template used to display the edit form.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

#Property Value

Type Description
RenderFragment<TreeListEditFormTemplateContext>

The edit form template.

#Remarks

The default edit form shows only predefined Save and Cancel buttons. You can disable the EditFormButtonsVisible option to hide them and create your own buttons.

Read Tutorial: Pop-up and Inline Edit Forms

Use the edit form template’s context parameter to access EditModel, DataItem, and ParentDataItem objects. Call the context’s GetEditor method to add an automatically generated editor to the edit form. To display a custom editor, place it in EditFormTemplate and implement two-way binding between the editor value and the corresponding edit model field.

Note

If you place a templated component in the edit form, ensure that you specify the context parameter explicitly either for the TreeList template or for the nested component. Otherwise, an error occurs.

The following code snippet adds automatically generated editors to the edit form:

@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);
    }
}

Blazor TreeList Edit Form

Refer to the following topic for more information: Templates in Blazor TreeList.

#Implements

See Also