DxGrid.StartEditNewRowAsync(String) Method
Starts editing a new row.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.1.dll
NuGet Package: DevExpress.Blazor
#Declaration
public Task StartEditNewRowAsync(
string fieldName = null
)
#Optional Parameters
Name | Type | Default | Description |
---|---|---|---|
field |
String | null | A data source field name that defines the column cell in which an editor in Edit |
#Returns
Type | Description |
---|---|
Task | A task that is completed when the row is in edit mode. |
#Remarks
The Grid’s EditMode property specifies how users edit Grid data. The StartEditNewRowAsync
method behaves as follows depending on the active edit mode:
- EditForm (Default)
- Displays the edit form for the new row and focuses the first editor in this form.
- PopupEditForm
- Invokes the pop-up edit form for the new row and focuses the first editor in this form.
- EditRow
- Displays the edit row for the new row and focuses the first editor in this row.
- EditCell
Displays and focuses an in-place editor in the cell associated with the specified field of the new data item. The method ignores the
fieldName
parameter in the following cases:- No column is bound to the specified field.
- The DataRowEditorVisible property of the column bound to the specified field is disabled.
When the
fieldName
parameter is omitted or ignored, the method displays an editor in the first data column whose DataRowEditorVisible equalstrue
.
Declare a DxGridCommandColumn object in the Columns template to display predefined New, Edit, and Delete command buttons in the Grid component. Alternatively, you can create custom command elements inside or outside the Grid. Handle a custom element’s click event and call the StartEditNewRowAsync
method to start editing the new row.
The following code snippet displays icons instead of default command buttons:
@page "/"
@using CommandButtonsWithIcons.Data
@inject WeatherForecastService ForecastService
<DxGrid Data="forecasts"
@ref="MyGrid"
KeyFieldName="ID"
DataItemDeleting="OnDataItemDeleting"
EditModelSaving="OnEditModelSaving">
<Columns>
<DxGridCommandColumn>
<HeaderTemplate>
<a class="oi oi-plus" @onclick="@(() => MyGrid.StartEditNewRowAsync())" style="text-decoration: none;" href="javascript:void(0);"></a>
</HeaderTemplate>
<CellDisplayTemplate>
<a class="oi oi-pencil" @onclick="@(() => MyGrid.StartEditRowAsync(context.VisibleIndex))" style="text-decoration: none;" href="javascript:void(0);"></a>
<a class="oi oi-x" @onclick="@(() => MyGrid.ShowDataItemDeleteConfirmation(context.DataItem))" style="text-decoration: none;" href="javascript:void(0);"></a>
</CellDisplayTemplate>
</DxGridCommandColumn>
<DxGridDataColumn FieldName=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)" />
<DxGridDataColumn FieldName=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)" />
<DxGridDataColumn FieldName=@nameof(WeatherForecast.Summary) Caption="Summary" />
<DxGridDataColumn FieldName=@nameof(WeatherForecast.Date) DisplayFormat="dd/MM/yyyy" />
</Columns>
<EditFormTemplate Context="EditFormContext">
<DxFormLayout>
<DxFormLayoutItem Caption="Temp. (C)">
@EditFormContext.GetEditor("TemperatureC")
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Summary">
@EditFormContext.GetEditor("Summary")
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Date">
@EditFormContext.GetEditor("Date")
</DxFormLayoutItem>
</DxFormLayout>
</EditFormTemplate>
</DxGrid>
@code {
string[]? summaries;
private List<WeatherForecast>? forecasts;
DxGrid? MyGrid;
protected override async Task OnInitializedAsync() {
forecasts = await ForecastService.GetForecastAsync();
summaries = ForecastService.Summaries;
}
async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
forecasts = await ForecastService.ChangeForecastAsync((WeatherForecast)e.EditModel);
}
async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
if (e.DataItem != null)
await ForecastService.Remove((WeatherForecast)e.DataItem);
}
}
For information on how to enable data editing, refer to the following topic: Edit Data in Blazor Grid.