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

ASP.NET Team Blog
12 November 2021

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.

DevExpress Blazor Grid - Edit Form

Use the Edit Mode option to switch between available modes:

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>
Note: Since our Grid supports Blazor's Validator components, you can easily implement custom validation scenarios.

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();
  }
}

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Anurag Mahato
Anurag Mahato
What is news regarding Inline edit and keyboard support ?
12 November 2021
MattP
MattP
Looking good! Is there plans to add in-cell editing? It's the only think keeping me from going with the DX library!
14 November 2021
NHIF
NHIF

Many Thanks.

Please hasten inline editing and Application Template the likes of Angular Template.

14 November 2021
CRM-12606e55-5a1b-422c-aab3-b0a0eb2371d2
John K
nice. looking f to check this out
15 November 2021
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)
@Anurag, @NHIF, @MattP,
Thanks for your feedback. We will likely publish our 2022 Blazor Roadmap within the coming weeks, please stay tuned as we'll discuss the upcoming features in that blog post.
15 November 2021
CRM-c73148c8-a383-4d8e-9ed0-e4978402b08c
SpencerDahl
I'm hoping a native report designer is on your 2022 Blazor Roadmap.
18 November 2021
Stephen Winstanley_2
Stephen Winstanley_2
In cell editing and keyboard support please
19 November 2021
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@SpencerDahl

For Reporting, our main focus next year will be on Blazor WebAssembly and looking at the challenges with supporting .NET 7. Thanks for your feedback and we'll consider a native Report Designer as well. Please stay tuned for our upcoming roadmap blog posts, which we'll likely publish after completing all internal research and surveys. Thanks.

19 November 2021
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)
Hi,

We plan to deliver the inline row edit in v22.1.
As for the in-place cell edit, it requires keyboard support. So, we will deliver these features simultaneously. We expect to ship them in the second half of 2022.

 

23 November 2021

Please login or register to post comments.