DxGrid.CustomizeEditModel Event
Allows you to create a custom edit model or customize an automatically-generated edit model.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v21.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public EventCallback<GridCustomizeEditModelEventArgs> CustomizeEditModel { get; set; }
Parameters
Type | Description |
---|---|
GridCustomizeEditModelEventArgs | A GridCustomizeEditModelEventArgs object that contains data for this event. |
Remarks
The Grid allows users to edit its data either by using the edit form or by showing the edit form in a pop-up window.
Tip
For information on how to enable data editing and use edit-related options, refer to the following topic: Edit Data and Validate Input.
The Grid tries to create an edit model based on a bound data item. Handle the CustomizeEditModel
event to implement your own edit model or customize an automatically-generated edit model.
Create a Custom Edit Model
The Grid cannot generate an edit model in the following cases:
- A data item class does not have a parameterless constructor.
- Data item fields bound to Grid columns are read-only.
Follow the steps below to implement a custom edit model.
- Declare an edit model class and its fields.
- Handle the
CustomizeEditModel
event. - Use the event argument’s DataItem property to access a data item. If this property is set to null, the edit model corresponds to a new row.
- Assign your custom edit model to the event argument’s EditModel property.
- In the EditModelSaving event handler and the EditFormTemplate, cast the
EditModel
property value to your custom edit model class.
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
@using System.ComponentModel.DataAnnotations;
<DxGrid Data="GridDataSource"
EditModelSaving="OnEditModelSaving"
DataItemDeleting="OnDataItemDeleting"
KeyFieldName="EmployeeId"
CustomizeEditModel="Grid_CustomizeEditModel">
<Columns>
<DxGridCommandColumn />
<DxGridDataColumn FieldName="FirstName" />
<DxGridDataColumn FieldName="LastName" />
<DxGridDataColumn FieldName="Title" />
<DxGridDataColumn FieldName="HireDate" />
</Columns>
<EditFormTemplate Context="editFormContext">
@{
var employee = (EmployeeEditModel)editFormContext.EditModel;
}
<DxFormLayout>
<DxFormLayoutItem Caption="First Name:">
<DxTextBox @bind-Text="@employee.FirstName" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Last Name:">
<DxTextBox @bind-Text="@employee.LastName" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Title:">
<DxTextBox @bind-Text="@employee.Title" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Hire Date:">
<DxDateEdit @bind-Date="@employee.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();
}
class EmployeeEditModel {
public int? EmployeeId { get; set; }
[Required, MaxLength(64)]
public string LastName { get; set; }
[Required, MaxLength(64)]
public string FirstName { get; set; }
public string Title { get; set; }
public DateTime? HireDate { get; set; }
}
async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
var editModel = (EmployeeEditModel)e.EditModel;
// Re-query a data item from the database.
var dataItem = e.IsNew ? new Employee() : Northwind.Employees.Find(editModel.EmployeeId);
// Assign changes from the edit model to the data item.
if (dataItem != null) {
dataItem.FirstName = editModel.FirstName;
dataItem.LastName = editModel.LastName;
dataItem.Title = editModel.Title;
dataItem.HireDate = editModel.HireDate;
// Post changes to the database.
if (e.IsNew)
await Northwind.AddAsync(dataItem);
await Northwind.SaveChangesAsync();
// Reload the entire Grid.
GridDataSource = await Northwind.Employees.ToListAsync();
}
}
async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
// Re-query a data item from the database.
var dataItem = Northwind.Employees.Find((e.DataItem as Employee).EmployeeId);
if (dataItem != null) {
// Remove the data item from the database.
Northwind.Remove(dataItem);
await Northwind.SaveChangesAsync();
// Reload the entire Grid.
GridDataSource = await Northwind.Employees.ToListAsync();
}
}
async Task Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) {
var dataItem = (Employee)e.DataItem;
if (dataItem == null)
e.EditModel = new EmployeeEditModel { };
else {
e.EditModel = new EmployeeEditModel {
EmployeeId = dataItem.EmployeeId,
FirstName = dataItem.FirstName,
LastName = dataItem.LastName,
Title = dataItem.Title,
HireDate = dataItem.HireDate
};
}
}
public void Dispose() {
Northwind?.Dispose();
}
}
Initialize New Rows
The CustomizeEditModel
event allows you to display predefined values in data editors when a user adds a new row.
- Check the event argument’s IsNew property to identify new rows.
- Use the EditModel property to access the edit model and initialize model field values.
The following snippet specifies the predefined value for the HireDate field:
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
<DxGrid Data="GridDataSource"
EditModelSaving="OnEditModelSaving"
DataItemDeleting="OnDataItemDeleting"
KeyFieldName="EmployeeId"
CustomizeEditModel="Grid_CustomizeEditModel">
<Columns>
<DxGridCommandColumn />
<DxGridDataColumn FieldName="FirstName" />
<DxGridDataColumn FieldName="LastName" />
<DxGridDataColumn FieldName="Title" />
<DxGridDataColumn FieldName="HireDate" />
</Columns>
<EditFormTemplate Context="editFormContext">
@{
var employee = (Employee)editFormContext.EditModel;
}
<DxFormLayout>
<DxFormLayoutItem Caption="First Name:">
<DxTextBox @bind-Text="@employee.FirstName" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Last Name:">
<DxTextBox @bind-Text="@employee.LastName" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Title:">
<DxTextBox @bind-Text="@employee.Title" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Hire Date:">
<DxDateEdit @bind-Date="@employee.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;
// Re-query a data item from the database.
var dataItem = e.IsNew ? new Employee() : Northwind.Employees.Find(editModel.EmployeeId);
// Assign changes from the edit model to the data item.
if (dataItem != null) {
dataItem.FirstName = editModel.FirstName;
dataItem.LastName = editModel.LastName;
dataItem.Title = editModel.Title;
dataItem.HireDate = editModel.HireDate;
// Post changes to the database.
if (e.IsNew)
await Northwind.AddAsync(dataItem);
await Northwind.SaveChangesAsync();
// Reload the entire Grid.
GridDataSource = await Northwind.Employees.ToListAsync();
}
}
async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
// Re-query a data item from the database.
var dataItem = Northwind.Employees.Find((e.DataItem as Employee).EmployeeId);
if (dataItem != null) {
// Remove the data item from the database.
Northwind.Remove(dataItem);
await Northwind.SaveChangesAsync();
// Reload the entire Grid.
GridDataSource = await Northwind.Employees.ToListAsync();
}
}
async Task Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) {
if (e.IsNew) {
var editModel = (Employee)e.EditModel;
editModel.HireDate = DateTime.Today;
}
}
public void Dispose() {
Northwind?.Dispose();
}
}