Inline Edit Row in Blazor Grid
- 6 minutes to read
In EditRow
mode, the Grid component displays in-place editors in all data cells of the edited row. Users can click command buttons to create, modify, and delete grid rows.
Starting with v24.2.5, the following keyboard shortcuts speed up row editing in EditRow
mode:
- Enter
- Validates input and saves changes.
- Esc
- Discards all changes made in the row and cancels row editing.
- Tab and Shift+Tab
- Move focus between focusable content in Grid cells (editors, buttons, cells in display mode).
Refer to the following help topic for the full list of shortcut keys: Keyboard Support in Blazor Grid.
#Enable Editing
Follow the steps below to allow users to create, modify, and delete rows in EditRow
mode.
Set the EditMode property to
EditRow
.If your data object has a primary key, assign it to the KeyFieldName or KeyFieldNames property.
Declare a DxGridCommandColumn object in the Columns template to display the command column.
Handle EditModelSaving and DataItemDeleting events to save changes and reload Grid data. Refer to the following topic for more information: Save Changes.
(Optional). Use the EditNewRowPosition property to display the new item row or change the position of the edit row displayed for new records.
@inject NwindDataService NwindDataService@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
<DxGrid Data="Data"
KeyFieldName="EmployeeId"
EditModelSaving="OnEditModelSaving"
DataItemDeleting="OnDataItemDeleting"
CustomizeEditModel="OnCustomizeEditModel"
EditMode="GridEditMode.EditRow">
<Columns>
<DxGridCommandColumn />
<DxGridDataColumn FieldName="FirstName" />
<DxGridDataColumn FieldName="LastName" />
<DxGridDataColumn FieldName="Title" />
<DxGridDataColumn FieldName="HireDate" />
</Columns>
</DxGrid>
@code {
IEnumerable<Employee> Data { get; set; }
NorthwindContext Northwind { get; set; }
protected override async Task OnInitializedAsync() {
Northwind = NorthwindContextFactory.CreateDbContext();
Data = await Northwind.Employees.ToListAsync();
}
void OnCustomizeEditModel(GridCustomizeEditModelEventArgs e) {
if(e.IsNew) {
var editModel = (Employee)e.EditModel;
editModel.EmployeeId = Data.Max(x => x.EmployeeId) + 1;
}
}
async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
var editModel = (Employee)e.EditModel;
if (e.IsNew)
await Northwind.AddAsync(editModel);
else
e.CopyChangesToDataItem();
// Post changes to the database.
await Northwind.SaveChangesAsync();
// Reload the entire Grid.
Data = 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.
Data = await Northwind.Employees.ToListAsync();
}
public void Dispose() {
Northwind?.Dispose();
}
}
#Related API
This section contains a comprehensive editing-related API reference.
Dx |
Type | Description |
---|---|---|
Custom |
Property | Allows you to declare custom validator components. |
Data |
Property | Allows you to replace automatically generated editors with custom content in all edit cells displayed for data columns. |
Edit |
Property | Specifies how users edit Grid data. |
Edit |
Property | Specifies the position of UI elements used to create new rows. |
Editor |
Property | Specifies how the Grid renders editors in the filter row and in data rows during edit operations. |
Validation |
Property | Specifies whether the Grid validates user input in DevExpress data editors located in the edit form or edit cells. |
Cancel |
Method | Cancels row editing and discards changes. |
Get |
Method | Returns editor settings of the column bound to the specified data source field. |
Get |
Method | Returns the edit context. |
Is |
Method | Returns whether the Grid is being edited. |
Is |
Method | Returns whether a new Grid row is being edited. |
Is |
Method | Returns whether the specified Grid row is being edited. |
Save |
Method | Triggers validation and raises the Edit |
Show |
Method | Displays the delete confirmation dialog for the specified data item. If a user confirms the operation, the method raises the Data |
Show |
Method | Displays the delete confirmation dialog for the specified row. If a user confirms the operation, the method raises the Data |
Start |
Method | Starts editing the specified data item. |
Start |
Method | Starts editing a new row. |
Start |
Method | Starts editing the row with the specified visible index. |
Customize |
Event | Allows you to customize a cell editor in a data row. |
Customize |
Event | Allows you to create a custom edit model or customize an automatically generated edit model. |
Data |
Event | Fires when a user confirms the delete operation in the delete confirmation dialog. |
Edit |
Event | Fires before the Grid cancels the edit operation and discards changes. |
Edit |
Event | Fires if validation succeeds after a user saves changes or you call the Save |
Edit |
Event | Fires before the Grid starts editing a row. |
Dx |
Type | Description |
---|---|---|
Cancel |
Property | Specifies whether the command column displays the Cancel button in Edit or Edit edit mode. |
Cell |
Property | Specifies a template used to display command column cells. |
Cell |
Property | Specifies a template used to display the command column’s edit cell. |
Delete |
Property | Specifies whether the command column displays Delete buttons. |
Edit |
Property | Specifies whether the command column displays Edit buttons. |
Header |
Property | Specifies a template used to display the command column header. |
New |
Property | Specifies whether the command column displays the New button. |
Save |
Property | Specifies whether the command column displays the Save button in Edit or Edit edit mode. |
Dx |
Type | Description |
---|---|---|
Cell |
Property | Allows you to replace an automatically generated editor with custom content in the column’s edit cell. |
Data |
Property | Specifies whether to render the editor associated with this column in the column edit cell, edit form, or pop-up edit form. |
Edit |
Property | Allows you to customize the editor associated with this column. |
Read |
Property | Specifies whether a user can change the column editor value when the Grid is in edit mode. |