Skip to main content
All docs
V24.1

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGrid.StartEditNewRowAsync(String) Method

Starts editing a new row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public Task StartEditNewRowAsync(
    string fieldName = null
)

#Optional Parameters

Name Type Default Description
fieldName String null

A data source field name that defines the column cell in which an editor in EditCell mode is to be displayed. If this parameter is omitted, the method displays an editor in the first data column whose DataRowEditorVisible equals true.

#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 equals true.

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

Blazor Grid Editing Custom Command Buttons

View Example: Use icons instead of default command buttons

For information on how to enable data editing, refer to the following topic: Edit Data in Blazor Grid.

See Also