DxGrid.EditFormTemplate Property
Specifies the template used to display the edit form.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v21.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public RenderFragment<GridEditFormTemplateContext> EditFormTemplate { get; set; }
Property Value
Type | Description |
---|---|
RenderFragment<GridEditFormTemplateContext> | The edit form template. |
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. The EditMode property specifies current edit mode.
Follow the steps below to enable data editing:
- Declare a DxGridCommandColumn object in the Columns template. This column displays the predefined New, Edit, and Delete command buttons.
- Use the
EditFormTemplate
to define edit form content. - Handle the following events to check user input and access permissions and post changes to an underlying data source:
- EditModelSaving – Fires when a user submits the edit form and validation is passed.
- DataItemDeleting – Fires when a user confirms the delete operation in the delete confirmation dialog.
- If your data object has a primary key, assign it to the KeyFieldName or KeyFieldNames property. If you do not specify these properties, the Grid uses standard .NET value equality comparison to identify data items.
Tip
For detailed information on how to enable data editing and use edit-related options, refer to the following topic: Edit Data and Validate Input.
The default edit form shows only the predefined Save and Cancel buttons. You can also disable the EditFormButtonsVisible option to hide the Save and Cancel buttons and implement your own buttons.
The Grid creates an edit model based on a bound data item. Use the edit form template’s context
parameter to access the EditModel and DataItem. In the template, place data editors and implement two-way binding between editor values and edit model fields.
Note that if you place a templated component in the edit form, ensure that you specify the Context
parameter explicitly either for the Grid or for the component used in the edit form. Otherwise, the error occurs.
The following example uses the DxFormLayout component to display DevExpress editors for all visible data columns:
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
<DxGrid Data="GridDataSource"
EditModelSaving="OnEditModelSaving"
DataItemDeleting="OnDataItemDeleting"
KeyFieldName="EmployeeId">
<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();
}
}
public void Dispose() {
Northwind?.Dispose();
}
}