blazor-devexpress-dot-blazor-dot-dxgrid-8de0e898.md
Specifies the position of UI elements used to create new rows.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[DefaultValue(GridEditNewRowPosition.Top)]
[Parameter]
public GridEditNewRowPosition EditNewRowPosition { get; set; }
| Type | Default | Description |
|---|---|---|
| GridEditNewRowPosition | Top |
An enumeration value.
|
Available values:
| 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.
|
Based on the EditMode, the Grid component invokes a pop-up edit form or displays an inline edit form, edit row, or cell editors once a user starts editing a row. The EditNewRowPosition property specifies the position of these UI elements displayed for new rows.
The EditNewRowPosition property also specifies visibility and location of the new item row. Like the New button, this row starts new row editing. Once clicked, an edit form, row, or cell editors appear within the new item row.
The new item row is hidden. The Grid starts editing a new row once a user clicks the New button or you call the StartEditNewRowAsync method. An inline edit form, edit row, or cell editors appear at the top of the page.
The new item row is hidden. The Grid starts editing a new row once a user clicks the New button or you call the StartEditNewRowAsync method. An inline edit form, edit row, or cell editors appear at the bottom of the page.
The new item row is pinned to the top of the current page. The row remains visible even when users scroll vertically or navigate pages.
Users can click the new item row or focus it and press Enter to start editing a new row. The Grid also focuses and activates the new item row after users click the New button or you call the StartEditNewRowAsync method.
Users can press Tab or Shift + Tab keys to navigate between the new item row’s data cells. If focus goes beyond the last data cell in EditCell mode, the Grid focuses the cell on the opposite end and validates user input. Depending on validation results, the following variants are possible:
The Grid displays the new item row after the last data row on the last page.
Users can click the new item row or focus it and press Enter to start editing a new row. The Grid also focuses and activates the new item row after users click the New button or you call the StartEditNewRowAsync method.
Users can press Tab or Shift + Tab keys to navigate between the new item row’s data cells. If focus goes beyond the last data cell in EditCell mode, the Grid focuses the cell on the opposite end and validates user input. Depending on validation results, the following variants are possible:
The following example displays the new item row fixed to the top of the current Grid page:
@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" EditButtonVisible="false" SaveButtonVisible="false" />
</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();
}
}
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 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 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";
}
}
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);
}
}
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);
});
See Also