DxGrid.EditModelSaving Event

Fires when a user submits the edit form and validation is passed.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

[Parameter]
public EventCallback<GridEditModelSavingEventArgs> EditModelSaving { get; set; }

Parameters

Type Description
GridEditModelSavingEventArgs

A GridEditModelSavingEventArgs object that contains data for this event.

Remarks

The Grid allows users to edit its data either by using the edit form or by showing the edit form in a pop-up window. The EditMode property specifies current edit mode.

The EditModelSaving event fires when a user submits the edit form and validation is passed. Handle this event to check user input and access permissions and post changes to an underlying data source.

Use the event argument’s EditModel property to access an edit model that stores all changes. The DataItem property returns a data item. The IsNew property identifies whether the edit model corresponds to a new or existing row.

Once the event handler is executed, the edit form is closed. If you do not save changes to the data source and want to keep the edit form open, set the event argument’s Cancel property to true.

Note that Grid data should be reloaded after you post changes to the data source. Do one of the following in the event handler:

  • If data is loaded from a database, re-initialize a variable bound to the Grid’s Data property as shown in the example below.
  • If data is stored in memory, set the event argument’s Reload property to true to refresh the Grid after the event handler is executed.

Tip

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

The following example saves changes to an underlying DbContext EF Core object:

@using Grid.Northwind
@using Microsoft.EntityFrameworkCore
@inject NorthwindContext NorthwindContext

<DxGrid Data="GridDataSource"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        KeyFieldName="EmployeeId">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <EditFormTemplate Context="editFormContext">
        @{
            var employee = (Employee)editFormContext.EditModel;
        }
        <DxFormLayout>
            <DxFormLayoutItem Caption="First Name:">
                <DxTextBox @bind-Text="@employee.FirstName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:">
                <DxTextBox @bind-Text="@employee.LastName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Title:">
                <DxTextBox @bind-Text="@employee.Title" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:">
                <DxDateEdit @bind-Date="@employee.HireDate" />
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }

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

    async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
        var editModel = (Employee)e.EditModel;
        // Re-query a data item from the database.
        var dataItem = e.IsNew ? new Employee() : NorthwindContext.Employees.Find(editModel.EmployeeId);

        // Assign changes from the edit model to the data item.
        if (dataItem != null) {
            dataItem.FirstName = editModel.FirstName;
            dataItem.LastName = editModel.LastName;
            dataItem.Title = editModel.Title;
            dataItem.HireDate = editModel.HireDate;

            // Post changes to the database.
            if (e.IsNew)
                await NorthwindContext.AddAsync(dataItem);
            await NorthwindContext.SaveChangesAsync();

            // Reload the entire Grid.
            GridDataSource = await NorthwindContext.Employees.ToListAsync();
        }
    }

    async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
        // Re-query a data item from the database.
        var dataItem = NorthwindContext.Employees.Find((e.DataItem as Employee).EmployeeId);

        if (dataItem != null) {
            // Remove the data item from the database.
            NorthwindContext.Remove(dataItem);
            await NorthwindContext.SaveChangesAsync();

            // Reload the entire Grid.
            GridDataSource = await NorthwindContext.Employees.ToListAsync();
        }
    }
}

Blazor Grid Editing

Run Demo: Grid - Edit Data

See Also