Skip to main content

DxGrid.EditNewRowPosition Property

Specifies the position of the edit form used to create new rows.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(GridEditNewRowPosition.Top)]
[Parameter]
public GridEditNewRowPosition EditNewRowPosition { get; set; }

Property Value

Type Default Description
GridEditNewRowPosition Top

A GridEditNewRowPosition enumeration value.

Available values:

Name Description
Top

The Grid displays the edit form at the top.

Bottom

The Grid displays the edit form at the bottom.

Remarks

When a user creates a new row in EditForm mode, the edit form appears at the top of the Grid. Set the EditNewRowPosition property to GridEditNewRowPosition.Bottom to display the edit form at the bottom of the Grid.

This property has no effect when the EditMode property is set to GridEditMode.PopupEditForm.

Tip

For information on how to enable data editing and use edit-related options, refer to the following topic: Editing and Validation in Blazor Grid.

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        KeyFieldName="EmployeeId"
        EditNewRowPosition="GridEditNewRowPosition.Bottom">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <EditFormTemplate Context="editFormContext">
        <DxFormLayout>
            <DxFormLayoutItem Caption="First Name:">
                @editFormContext.GetEditor("FirstName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:">
                @editFormContext.GetEditor("LastName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Title:">
                @editFormContext.GetEditor("Title")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:">
                @editFormContext.GetEditor("HireDate")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    NorthwindContext Northwind { 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;
        // Assign changes from the edit model to the data item.
        if (e.IsNew)
            await Northwind.AddAsync(editModel);
        else
            e.CopyChangesToDataItem();
        // Post changes to the database.
        await Northwind.SaveChangesAsync();
        // Reload the entire Grid.
        GridDataSource = 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.
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Blazor Grid Edit Form Position New Rows

Implements

See Also