blazor-devexpress-dot-blazor-dot-dxgrid-04af13af.md
Specifies the template used to display the edit form.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public RenderFragment<GridEditFormTemplateContext> EditFormTemplate { get; set; }
| Type | Description |
|---|---|
| RenderFragment<GridEditFormTemplateContext> |
The edit form template.
|
The default edit form shows only predefined Save and Cancel buttons. You can disable the EditFormButtonsVisible option to hide them and implement your own buttons.
Read Tutorial: Edit Data View Example: How to edit a row on a separate page
Use the edit form template’s context parameter to access the EditModel and DataItem objects. Call the context’s GetEditor method to add an automatically generated editor to the edit form. To display a custom editor, place it in EditFormTemplate and implement two-way binding between the editor value and the corresponding edit model field.
Note
If you place a templated component in the edit form, ensure that you specify the context parameter explicitly either for the Grid template or for the nested component. Otherwise, an error occurs.
The following code snippet adds automatically generated editors to the edit form:
View Example: Bind the Grid to data with Entity Framework Core
@page "/"
@using Microsoft.EntityFrameworkCore
@using BindToData.Models
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
<DxGrid Data="Data"
CustomizeEditModel="OnCustomizeEditModel"
EditModelSaving="OnEditModelSaving"
DataItemDeleting="OnDataItemDeleting"
KeyFieldName="EmployeeId">
<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<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;
// 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.
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 BindToData.Models;
public partial class Employee {
public int EmployeeId { get; set; }
[Required]
public string LastName { get; set; } = null!;
[Required]
public string FirstName { get; set; } = null!;
public string? Title { get; set; }
public string? TitleOfCourtesy { get; set; }
public DateTime? BirthDate { get; set; }
public 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 int? ReportsTo { get; set; }
public string? PhotoPath { get; set; }
public virtual ICollection<Employee> InverseReportsToNavigation { get; } = new List<Employee>();
public virtual Employee? ReportsToNavigation { get; set; }
}
using System;
using System.Collections.Generic;
using Microsoft.EntityFrameworkCore;
namespace BindToData.Models;
public partial class NorthwindContext : DbContext {
public NorthwindContext() {}
public NorthwindContext(DbContextOptions<NorthwindContext> options) : base(options) {}
public virtual DbSet<Employee> Employees { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
}
protected override void OnModelCreating(ModelBuilder modelBuilder) {
modelBuilder.UseCollation("SQL_Latin1_General_CP1_CI_AS");
modelBuilder.Entity<Employee>(entity => {
entity.HasIndex(e => e.LastName, "LastName");
entity.HasIndex(e => e.PostalCode, "PostalCode");
entity.Property(e => e.EmployeeId).HasColumnName("EmployeeID");
entity.Property(e => e.Address).HasMaxLength(60);
entity.Property(e => e.BirthDate).HasColumnType("datetime");
entity.Property(e => e.City).HasMaxLength(15);
entity.Property(e => e.Country).HasMaxLength(15);
entity.Property(e => e.Extension).HasMaxLength(4);
entity.Property(e => e.FirstName).HasMaxLength(10);
entity.Property(e => e.HireDate).HasColumnType("datetime");
entity.Property(e => e.HomePhone).HasMaxLength(24);
entity.Property(e => e.LastName).HasMaxLength(20);
entity.Property(e => e.Notes).HasColumnType("ntext");
entity.Property(e => e.Photo).HasColumnType("image");
entity.Property(e => e.PhotoPath).HasMaxLength(255);
entity.Property(e => e.PostalCode).HasMaxLength(10);
entity.Property(e => e.Region).HasMaxLength(15);
entity.Property(e => e.Title).HasMaxLength(30);
entity.Property(e => e.TitleOfCourtesy).HasMaxLength(25);
entity.HasOne(d => d.ReportsToNavigation).WithMany(p => p.InverseReportsToNavigation)
.HasForeignKey(d => d.ReportsTo)
.HasConstraintName("FK_Employees_Employees");
});
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.db");
options.UseSqlite("DataSource=" + dbPath);
});
For additional information about templates in the Grid component, refer to the following topic: Templates in Blazor Grid.
See Also