Grid for Blazor - Standard and Popup Edit Forms (Now available in v21.2)

As you may know, our most recent major update - v21.2 – introduced new data editing and validation features for our new DevExpress Blazor Grid component(CTP). Should you have any questions/comments about these new features, please post a comment below or create a new support ticket.

New Blazor Edit Forms

Our Blazor Grid supports two new edit modes: Standard and Popup Edit Forms.

Use the Edit Mode option to switch between available modes:

• GridEditMode.EditForm (Default) – The Grid displays an inline edit form instead of the edited row.
• GridEditMode.PopupEditForm– The Grid displays the edit form in a pop-up window.

Online Demo

New Blazor Command Column

To enable data editing, add a DxGridCommandColumn to your Grid's Razor markup. This column displays the New, Edit, and Delete buttons:

<DxGrid Data="DataSource" ...>
  <Columns>
    <DxGridCommandColumn />
    @*...*@
  </Columns>
</DxGrid>

The NewButtonVisible, EditButtonVisible, and DeleteButtonVisible options allow you to hide the default command buttons. If you want to implement custom buttons, use the CellDisplayTemplate.

Customizing Edit Form

Currently, our Blazor Grid requires that you create a custom edit form. The EditFormTemplate allows you to create edit forms using standard or DevExpress data editors. I recommend that you use our Form Layout component within the Edit Form to generate form layouts with ease:

<DxGrid ...>
  ...
  <Columns>
    <DxGridCommandColumn />
    @*...*@
  </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>
    </DxFormLayout>
  </EditFormTemplate>
</DxGrid>

Edit Model and Data Item

Our Blazor Grid will create an internal Edit Model based on your data item's class when a user edits data. The Grid uses .NET value equality comparison to compare data Items by default. If your data source includes a key field or multiple keys, assign them to the KeyFieldName or KeyFieldNames property to disable .NET value comparison and instead allow the grid to compare data objects using keys.

You can access the Edit Model in the CustomizeEditModel event handler to update its values. The following code initializes values when a new row is being edited:

async Task Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) {
  if (e.IsNew) {
    var editModel = (Employee)e.EditModel;
    editModel.HireDate = DateTime.Today;
  }
}

This event also allows you to create a custom Edit Model instead of an automatically created object.

Validate Data

If you assign data annotation attributes to the Edit Model properties, our Blazor Grid automatically validates associated values. Add Blazor's ValidationMessage component to display validation errors for data editors separately or ValidationSummary to summarize validation error messages.

<DxGrid ...>
  ...
  <Columns>
    <DxGridCommandColumn />
    @*...*@
  </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 ColSpanMd="12">
        <ValidationSummary />
      </DxFormLayoutItem>
    </DxFormLayout>
  </EditFormTemplate>
</DxGrid>

Save Changes

Before saving changes, you can handle the following events to validate user input, access permissions-related info, and post changes to the underlying data source:

1. The Grid raises its EditModelSaving event after a user has submitted the edit form and data validation has passed.
2. The DataItemDeleting event is triggered after the user has confirmed the delete operation.
3. The DataItem property returns your data object.
4. The EditModel properties contain updated values.

Perform any additional checks, if necessary, and update your data source in these event handlers. Finally, be sure to re-bind the Grid with the updated data source to refresh displayed data:

async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
  var editModel = (Employee)e.EditModel;
  var dataItem = e.IsNew ? new Employee() : NorthwindContext.Employees.Find(editModel.EmployeeId);

  if (dataItem != null) {
    dataItem.FirstName = editModel.FirstName;
    dataItem.LastName = editModel.LastName;
    if (e.IsNew)
        await NorthwindContext.AddAsync(dataItem);
    await NorthwindContext.SaveChangesAsync();

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

async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
  var dataItem = NorthwindContext.Employees.Find((e.DataItem as Employee).EmployeeId);

  if (dataItem != null) {
    NorthwindContext.Remove(dataItem);
    await NorthwindContext.SaveChangesAsync();

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