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.SaveChangesAsync() Method

Triggers validation and raises the EditModelSaving event if validation succeeds. The method immediately raises this event if validation is disabled.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public Task SaveChangesAsync()

#Returns

Type Description
Task

The task that is raised when the EditModelSaving event occurs and is completed after the event handler is processed.

#Remarks

This method allows you to implement your custom Save button inside or outside the TreeList.

Handle a button’s click event and call the SaveChangesAsync method to trigger validation and raise the EditModelSaving event if validation succeeds. Handle the EditModelSaving event to post changes to the underlying data source. If the ValidationEnabled property is disabled, the method immediately raises this event.

Inline and pop-up edit forms display predefined Save and Cancel buttons. Disable the EditFormButtonsVisible property to hide these buttons. In EditRow and EditCell edit modes, the command column shows predefined Save and Cancel buttons for the edited row. Disable the column’s SaveButtonVisible and CancelButtonVisible properties to hide these buttons.

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

Blazor TreeList Edit Form with Custom Buttons

@inject EmployeeTaskService EmployeeTaskService

<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 Click="@(() => MyTreeList.SaveChangesAsync())" Text="Save" />
                <DxButton Click="@(() => MyTreeList.CancelEditAsync())" Text="Cancel" />
            </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);
    }
}

Refer to the following topic for more information: Editing and Validation in Blazor TreeList.

See Also