DxGrid.StartEditRowAsync(Int32) Method
Displays the edit form or edit row used to modify the specified row.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v23.1.dll
NuGet Package: DevExpress.Blazor
Declaration
public Task StartEditRowAsync(
int visibleIndex
)
Parameters
Name | Type | Description |
---|---|---|
visibleIndex | Int32 | The row’s visible index. |
Returns
Type | Description |
---|---|
Task | The task that is completed when the edit form/row is displayed. |
Remarks
Users can employ an inline edit row or invoke a standard or pop-up edit form to edit data in the Grid. The EditMode property specifies the current edit mode.
Tip
For information on how to enable data editing, refer to the following topic: Edit Data in Blazor Grid.
The Grid supports the DxGridCommandColumn that contains the predefined New, Edit, and Delete command buttons. Once a user clicks the New or Edit button, the edit form or edit row appears.
You can also create custom command elements inside or outside the Grid. Handle an element’s click event and call the StartEditRowAsync
method to display the edit form or row for the specified row.
The Grid also includes the following edit-related methods:
- StartEditDataItemAsync display the edit form or edit row used to modify the specified data item.
- StartEditNewRowAsync displays the edit form/row used to create a new data row.
- ShowRowDeleteConfirmation and ShowDataItemDeleteConfirmation display the delete confirmation dialog for the specified row or data item.
The following example creates buttons used to edit and delete a row whose visible index is 0
:
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
<DxGrid Data="GridDataSource"
EditModelSaving="OnEditModelSaving"
DataItemDeleting="OnDataItemDeleting"
KeyFieldName="EmployeeId"
EdiMode="GridEditMode.EditRow"
@ref="MyGrid">
<Columns>
<DxGridCommandColumn Width="150" />
<DxGridDataColumn FieldName="FirstName" />
<DxGridDataColumn FieldName="LastName" />
<DxGridDataColumn FieldName="Title" />
<DxGridDataColumn FieldName="HireDate" />
</Columns>
</DxGrid>
<br />
<DxButton Click="() => MyGrid.StartEditRowAsync(0)">Edit First Row</DxButton>
<DxButton Click="() => MyGrid.ShowRowDeleteConfirmation(0)">Delete First Row</DxButton>
@code {
IEnumerable<object> GridDataSource { get; set; }
NorthwindContext Northwind { get; set; }
IGrid MyGrid { get; set; }
protected override async Task OnInitializedAsync() {
Northwind = NorthwindContextFactory.CreateDbContext();
GridDataSource = await Northwind.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() : Northwind.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 Northwind.AddAsync(dataItem);
await Northwind.SaveChangesAsync();
// Reload the entire Grid.
GridDataSource = await Northwind.Employees.ToListAsync();
}
}
async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
// Re-query a data item from the database.
var dataItem = Northwind.Employees.Find((e.DataItem as Employee).EmployeeId);
if (dataItem != null) {
// Remove the data item from the database.
Northwind.Remove(dataItem);
await Northwind.SaveChangesAsync();
// Reload the entire Grid.
GridDataSource = await Northwind.Employees.ToListAsync();
}
}
public void Dispose() {
Northwind?.Dispose();
}
}
Note
When you use a GridDevExtremeDataSource, do not call the StartEditRowAsync
method for a row that is outside the visible display range. The GridDevExtremeDataSource
loads only a small number of rows based on the page size (in the paging navigation mode) or the viewport size (in the virtual scrolling mode). If you have a reference to the corresponding data item, you can call the StartEditDataItemAsync(Object) method.