DxDataGrid<T>.EditFormTemplate Property
Specifies a template used to display the edit form.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v22.1.dll
Declaration
[Parameter]
public RenderFragment<T> EditFormTemplate { get; set; }
Property Value
Type | Description |
---|---|
RenderFragment<T> | The template content. Here, |
Remarks
Important
The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.
This example demonstrates how to implement a custom edit form with input validation. The complete source code is available at the end.
Add the DxDataGrid<T> component to your application and bind it to data. Add the Data Grid’s columns to the Columns collection. This example uses the Data object that stores Employee type data items.
<DxDataGrid @ref="@grid" Data="@Data"> <Columns> <DxDataGridCommandColumn Width="150px" /> <DxDataGridColumn Field="@nameof(Employee.FirstName)" /> <DxDataGridColumn Field="@nameof(Employee.LastName)" /> <DxDataGridColumn Field="@nameof(Employee.Title)" /> <DxDataGridColumn Field="@nameof(Employee.TitleOfCourtesy)" Width="150px" /> <DxDataGridDateEditColumn Field="@nameof(Employee.BirthDate)" Width="150px" /> <DxDataGridDateEditColumn Field="@nameof(Employee.HireDate)" Width="150px" /> </Columns> </DxDataGrid>
Create a class that implements an edit model with custom validation logic (FormEditContext):
- Apply the
Required
data annotation attribute to all data source fields to prohibit null values. - Apply the
StringLength
attribute to the Notes field to specify the minimum and maximum length of characters. - Specify data ranges for the BirthDate and HireDate fields.
@using System.ComponentModel.DataAnnotations; @code { // ... class FormEditContext { public FormEditContext(Employee dataItem) { DataItem = dataItem; if(DataItem == null) { DataItem = new Employee(); IsNewRow = true; } FirstName = DataItem.FirstName; LastName = DataItem.LastName; Title = DataItem.Title; TitleOfCourtesy = DataItem.TitleOfCourtesy; BirthDate = DataItem.BirthDate; HireDate = DataItem.HireDate; Notes = DataItem.Notes; } public Employee DataItem { get; set; } public bool IsNewRow { get; set; } [Required] public string FirstName { get; set; } [Required] public string LastName { get; set; } [Required] public string Title { get; set; } public string TitleOfCourtesy { get; set; } [Required] [Range(typeof(DateTime), "1/1/1970", "1/1/2020", ErrorMessage = "BirthDate must be between {1:d} and {2:d}")] public 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 DateTime? HireDate { get; set; } [Required] [StringLength(maximumLength: 256, MinimumLength = 4, ErrorMessage = "The Notes should be 4 to 256 characters.")] public string Notes { get; set; } public Action StateHasChanged { get; set; } } }
- Apply the
Handle the
DxDataGrid
‘s RowEditStart and RowInsertStart events to initialize the EditContext object of the FormEditContext class when a user opens the edit form.Use Blazor’s standard
EditForm
component inside theDxDataGrid
‘s EditFormTemplate to enable user input validation. Assign the EditContext object to theEditForm
‘s Model property.<DxDataGrid @ref="@grid" Data="@Vacancies" ...> @* ... *@ <EditFormTemplate> <EditForm Model="@EditContext" OnValidSubmit="@HandleValidSubmit"> @* ... *@ </EditForm> </EditFormTemplate> </DxDataGrid>
Use the
DataAnnotationsValidator
component to enable validation via annotation attributes.<EditFormTemplate> <EditForm Model="@EditContext" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> @* ... *@ </EditForm> </EditFormTemplate>
Add the DxFormLayout component to the
EditForm
and populate it with items.<EditFormTemplate> <EditForm Model="@EditContext" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> <DxFormLayout> <DxFormLayoutItem Caption="First Name:" ColSpanMd="6"> <DxTextBox @bind-Text="@EditContext.FirstName" /> </DxFormLayoutItem> @* ... *@ </DxFormLayout> </EditForm> </EditFormTemplate>
Use unique Context property values for parent (
EditForm
) and child (DxFormLayoutItem
) components to avoid a name conflict.<EditFormTemplate> <EditForm Model="@EditContext" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> <DxFormLayout> <DxFormLayoutItem Caption="First Name:" ColSpanMd="6"> <DxTextBox @bind-Text="@EditContext.FirstName" Context="FormLayoutContext" /> </DxFormLayoutItem> @* ... *@ </DxFormLayout> </EditForm> </EditFormTemplate>
Add two DxButton components to submit the form and to cancel the row edit. For the first button, set the SubmitFormOnClick property to true.
@* ... *@ <DxFormLayoutItem ColSpanMd="12" Context="FormLayoutContext"> <div class="text-right"> <DxButton RenderStyle="ButtonRenderStyle.Primary" SubmitFormOnClick="true" Text="Update" /> <DxButton RenderStyle="ButtonRenderStyle.Link" Click="OnCancelButtonClick" Text="Cancel" /> </div> </DxFormLayoutItem>
Add the
ValidationSummary
component to one layout item to summarize and display validation messages.<DxFormLayoutItem ColSpanMd="12" Context="FormLayoutContext"> <ValidationSummary /> </DxFormLayoutItem>
In the
HandleValidSubmit
event handler, save user input to the edit model.@code { // ... async Task HandleValidSubmit() { EditContext.DataItem.FirstName = EditContext.FirstName; EditContext.DataItem.LastName = EditContext.LastName; EditContext.DataItem.Title = EditContext.Title; EditContext.DataItem.TitleOfCourtesy = EditContext.TitleOfCourtesy; EditContext.DataItem.BirthDate = EditContext.BirthDate; EditContext.DataItem.HireDate = EditContext.HireDate; EditContext.DataItem.Notes = EditContext.Notes; if(EditContext.IsNewRow) { await NwindDataService.InsertEmployeeAsync(EditContext.DataItem); } else { await NwindDataService.UpdateEmployeeAsync(EditContext.DataItem, new Dictionary<string, object>()); } await grid.CancelRowEdit(); Data = await NwindDataService.GetEmployeesEditableAsync(); StateHasChanged(); } }
Complete Code
<DxDataGrid @ref="@grid"
Data="@Data"
ShowPager="false"
RowRemovingAsync="@OnRowRemovingAsync"
RowEditStart="@(dataItem => OnRowEditStarting(dataItem))"
RowInsertStart="@(() => OnRowEditStarting(null))">
<Columns>
<DxDataGridCommandColumn Width="150px" />
<DxDataGridColumn Field="@nameof(Employee.FirstName)" />
<DxDataGridColumn Field="@nameof(Employee.LastName)" />
<DxDataGridColumn Field="@nameof(Employee.Title)" />
<DxDataGridColumn Field="@nameof(Employee.TitleOfCourtesy)" Width="150px" />
<DxDataGridDateEditColumn Field="@nameof(Employee.BirthDate)" Width="150px" />
<DxDataGridDateEditColumn Field="@nameof(Employee.HireDate)" Width="150px" />
</Columns>
<EditFormTemplate>
<EditForm Model="@EditContext" Context="EditFormContext" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<DxFormLayout>
<DxFormLayoutItem Caption="First Name:" ColSpanMd="6" Context="FormLayoutContext">
<DxTextBox @bind-Text="@EditContext.FirstName" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Last Name:" ColSpanMd="6" Context="FormLayoutContext">
<DxTextBox @bind-Text="@EditContext.LastName" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Title:" ColSpanMd="6" Context="FormLayoutContext">
<DxTextBox @bind-Text="@EditContext.Title" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Title of Courtesy:" ColSpanMd="6" Context="FormLayoutContext">
<DxTextBox @bind-Text="@EditContext.TitleOfCourtesy" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Birth Date:" ColSpanMd="6" Context="FormLayoutContext">
<DxDateEdit @bind-Date="@EditContext.BirthDate" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6" Context="FormLayoutContext">
<DxDateEdit @bind-Date="@EditContext.HireDate" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Notes:" ColSpanMd="12" Context="FormLayoutContext">
<DxMemo @bind-Text="@EditContext.Notes" Rows="5" />
</DxFormLayoutItem>
<DxFormLayoutItem ColSpanMd="12" Context="FormLayoutContext">
<ValidationSummary />
</DxFormLayoutItem>
<DxFormLayoutItem ColSpanMd="12" Context="FormLayoutContext">
<div class="text-right">
<DxButton RenderStyle="ButtonRenderStyle.Primary" SubmitFormOnClick="true" Text="Update" />
<DxButton RenderStyle="ButtonRenderStyle.Link" Click="OnCancelButtonClick" Text="Cancel" />
</div>
</DxFormLayoutItem>
</DxFormLayout>
</EditForm>
</EditFormTemplate>
</DxDataGrid>