Blazor Grid — Inline Row Editing (v22.1)

As you may already know, the DevExpress Blazor Grid (v22.1) ships with inline row editing support. In this post, I’ll summarize all 3 edit modes and describe how to introduce inline row editing within your Blazor-powered app.

Different Edit Modes

In previous versions of our Blazor Grid, you could select one of the following data edit modes:

• EditForm — The Grid displays a standard edit form instead for the target row.

  

• PopuEditForm — The Grid displays an edit form within a pop-up window.

  

You now have access to one more edit mode option — EditRow. If enabled, once the Edit button is clicked inside a grid row, all row values can be modified dynamically within grid cells. This option allows users to edit data directly within the grid (no need to open an edit form with multiple editors). The benefits of inline data editing include a more compact view. Users can also visually associate edits with specific grid columns.

Interactive Inline Row Editing Demo

Activate the New EditRow Mode

To activate this new mode, set the EditMode property to EditRow. Once set, you will need to specify the edit template used for row cells in one of two ways:

• Use the DataColumnCellEditTemplate to define a common template for all row cells.

<DxGrid EditMode="GridEditMode.EditRow" ...>
  <DataColumnCellEditTemplate>
    @{
      var employee = (EditableEmployee)context.EditModel;
      switch (context.DataColumn.FieldName) {
        case "FirstName":
          <DxTextBox @bind-Text="@employee.FirstName"></DxTextBox>
          break;
        case "LastName":
          <DxTextBox @bind-Text="@employee.LastName"></DxTextBox>
          break;
        case "Title":
          <DxTextBox @bind-Text="@employee.Title"></DxTextBox>
          break;
        case "HireDate":
          <DxDateEdit @bind-Date="@employee.HireDate"></DxDateEdit>
          break;
      }
    }
  </DataColumnCellEditTemplate>
...
</DxGrid>

• Use the CellEditTemplate to define an individual edit cell template for a column.

<DxGridDataColumn FieldName="FirstName">
  <CellEditTemplate>
    @{
       var employee = (EditableEmployee)context.EditModel;
     }
     <DxTextBox @bind-Text="@employee.FirstName"></DxTextBox>
  </CellEditTemplate>
</DxGridDataColumn>

Input Validation

Our Blazor Grid's new EditRow mode supports data validation. The Grid's built-in validation engine is based on DataAnnotationValidator. The Grid verifies input data for fields with data annotation attributes. When a user enters invalid data into a cell and navigates away (or attempts to save the edited row), DataAnnotationValidator marks an editor with an invalid value (using a red outline).

If you wish to display additional information about validation errors, you can obtain the validation message from the EditContext property. For example, the code below displays an error icon with a tooltip next to an invalid editor:

...
  <CellEditTemplate>
    @{
      var employee = (EditableEmployee)context.EditModel;
      var message = GetValidationMessage(context.EditContext);
    }
    <div class="d-flex align-items-center">
      <DxTextBox @bind-Text="@employee.FirstName" CssClass="w-100"></DxTextBox>
      @if(!string.IsNullOrWhiteSpace(message)) {
        <div class="grid-validation-message bg-danger" title="@message"></div>
      }
    </div>
  </CellEditTemplate>
...

Reusing Cell Templates

Once you configure data editors for your columns and specified validation error logic, you may wish to reuse your code in other Grids within your Blazor app. Those of you familiar with WPF know that cell templates there can be stored and reused as resources. In Blazor, the best way to reuse the UI is to create components (https://docs.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms-developers/components).

For Inline Editing, you can create components that implement the following functionality:

• Define a common UI for the display of validation errors.

• Create a component used as a cell editor by multiple columns of the same type (e.g., a currency editor).

• Create a component used as a "fallback cell editor" if no other editor is defined for a column.

We prepared the following GitHub example to demonstrate this approach with Inline editing: Blazor Grid — Inline Editing and Cell Edit Templates.

Your Feedback Counts

Please take a moment to respond to the following survey question.

Free DevExpress Products - Get Your Copy Today