GridEditNewRowPosition Enum

Lists values that specify the position of Grid UI elements used to create new rows.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public enum GridEditNewRowPosition

Members

Name	Description
Top	The new item row is hidden. Once a user starts editing a new row, the Grid displays an edit form, edit row, or cell editors at the top of the current page.
Bottom	The new item row is hidden. Once a user starts editing a new row, the Grid displays an edit form, edit row, or cell editors at the bottom of the current page.
FixedOnTop	The Grid displays the new item row pinned to the top of the current page.
LastRow	The Grid displays the new item row after the last data row on the last page.

Related API Members

The following properties accept/return GridEditNewRowPosition values:

Library	Related API Members
Blazor	DxGrid.EditNewRowPosition
	IGrid.EditNewRowPosition
XAF: Cross-Platform .NET App UI & Web API	DxGridModel.EditNewRowPosition

Remarks

The following example displays the new item row fixed to the top of the current Grid page:

Razor

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

<DxGrid Data="Data"
        KeyFieldName="EmployeeId"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        CustomizeEditModel="OnCustomizeEditModel"
        EditMode="GridEditMode.EditCell"
        EditNewRowPosition="GridEditNewRowPosition.FixedOnTop">
    <Columns>
        <DxGridDataColumn FieldName="TitleOfCourtesy" Caption="Courtesy Title" />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridCommandColumn Width="30px">
            <HeaderTemplate>
                <DxButton IconCssClass="grid-icon grid-icon-add"
                          RenderStyle="ButtonRenderStyle.Link"
                          aria-label="Add"
                          Click="@(() => Grid.StartEditNewRowAsync())" />
            </HeaderTemplate>
            <CellDisplayTemplate>
                <div class="grid-cell-align-center">
                    <DxButton IconCssClass="grid-icon grid-icon-delete"
                              RenderStyle="ButtonRenderStyle.Link"
                              aria-label="Delete"
                              Click="@(() => Grid.ShowRowDeleteConfirmation(context.VisibleIndex))"/>
                </div>
            </CellDisplayTemplate>
            <CellEditTemplate>
                <div class="grid-cell-align-center">
                    <DxButton Enabled="false"
                              CssClass="grid-disabled-button"
                              IconCssClass="grid-icon grid-icon-delete"
                              aria-label="Delete"
                              RenderStyle="ButtonRenderStyle.Link"/>
                </div>
            </CellEditTemplate>
        </DxGridCommandColumn>
    </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();
    }
}

Employee

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace Grid.Northwind {
    public partial class Employee {
        public int EmployeeId { get; set; }
        [Required]
        public string LastName { get; set; }
        [Required]
        public string FirstName { get; set; }
        [Required]
        public string Title { get; set; }
        public string TitleOfCourtesy { get; set; }
        public Nullable<System.DateTime> BirthDate { get; set; }
        [Required]
        [Range(typeof(DateTime), "1/1/2000", "1/1/2020",
        ErrorMessage = "HireDate must be between {1:d} and {2:d}")]
        public Nullable<System.DateTime> HireDate { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string HomePhone { get; set; }
        public string Extension { get; set; }
        public byte[] Photo { get; set; }
        public string Notes { get; set; }
        public Nullable<int> ReportsTo { get; set; }
        public string PhotoPath { get; set; }
        public virtual ICollection<Order> Orders { get; set; }
        public string Text => $"{FirstName} {LastName} ({Title})";
        public string ImageFileName => $"Employees/{EmployeeId}.jpg";
    }
}

NorthwindContext

using Microsoft.EntityFrameworkCore;
#nullable disable

namespace Grid.Northwind {
    public partial class NorthwindContext : DbContext {

        public NorthwindContext(DbContextOptions<NorthwindContext> options)
            : base(options) {
        }
        // ...
        public virtual DbSet<Employee> Employees { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
            if(!optionsBuilder.IsConfigured) {
                optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true");
            }
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder) {
            modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
            // ...
            modelBuilder.Entity<Employee>(entity => {
                entity.HasIndex(e => e.TitleOfCourtesy, "TitleOfCourtesy");
                entity.HasIndex(e => e.EmployeeId, "EmployeeId");
                entity.HasIndex(e => e.LastName, "LastName");
                entity.HasIndex(e => e.FirstName, "FirstName");
                entity.HasIndex(e => e.Title, "Title");
                entity.HasIndex(e => e.BirthDate, "BirthDate");
                entity.HasIndex(e => e.HireDate, "HireDate");
                entity.HasIndex(e => e.Notes, "Notes");
            });
            OnModelCreatingPartial(modelBuilder);
        }

        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

Program.cs

using Microsoft.EntityFrameworkCore;
// ...
builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) ={
    var env = sp.GetRequiredService<IWebHostEnvironment>();
    var dbPath = Path.Combine(env.ContentRootPath, "Northwind-5e44b51f.mdf");
    options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
});

CSS

.grid-icon {
    display: inline-block;
    width: 1em;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    vertical-align: middle;
    margin: -0.125rem;
}
.grid-icon-add {
    -webkit-mask-image: url("../images/icons/add.svg");
    mask-image: url("../images/icons/add.svg");
}
.grid-icon-delete {
    -webkit-mask-image: url("../images/icons/delete.svg");
    mask-image: url("../images/icons/delete.svg");
}
.grid-disabled-button {
    pointer-events:none;
}
.grid-cell-align-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -4px;
    margin-bottom: -4px;
}

Refer to the EditNewRowPosition property description for more information.