Skip to main content

DxGrid.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.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

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.

Tip

For detailed information on how to enable data editing and use edit-related options, refer to the following topic: Edit Data in Blazor Grid.

Edit 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 hides predefined Save and Cancel buttons and implements custom buttons in the edit form:

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        KeyFieldName="EmployeeId"
        EditFormButtonsVisible="false"
        @ref="MyGrid">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <EditFormTemplate Context="editFormContext">
        <DxFormLayout>
            <DxFormLayoutItem Caption="First Name:">
                @editFormContext.GetEditor("FirstName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:">
                @editFormContext.GetEditor("LastName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Title:">
                @editFormContext.GetEditor("Title")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:">
                @editFormContext.GetEditor("HireDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem ColSpanMd="12">
                <DxButton SubmitFormOnClick="true" Text="Save" />
                <DxButton Click="@(() => MyGrid.CancelEditAsync())" Text="Cancel" />
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }
    IGrid MyGrid { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
        var editModel = (Employee)e.EditModel;
        // Assign changes from the edit model to the data item.
        if (e.IsNew)
            await Northwind.AddAsync(editModel);
        else
            e.CopyChangesToDataItem();
        // Post changes to the database.
        await Northwind.SaveChangesAsync();
        // Reload the entire Grid.
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
         // Remove the data item from the database.
        Northwind.Remove(e.DataItem);
        await Northwind.SaveChangesAsync();
        // Reload the entire Grid.
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Blazor Grid Edit Form with Custom Buttons

Implements

See Also