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, <T> is the grid’s data item type that equals the type of items stored in a bound data source (IEnumerable<T> or IQueryable<T>).

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.

1. 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.

   Razor

   <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>
   

   Code

   @code {
       DxDataGrid<Employee> grid;
       IEnumerable<Employee> Data { get; set; }
       protected override async Task OnInitializedAsync() {
           Data = await NwindDataService.GetEmployeesEditableAsync();
       }
   }
   

2. 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.
   Code

   @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; }
       }
   }
   

3. Handle the DxDataGrid‘s RowEditStart and RowInsertStart events to initialize the EditContext object of the FormEditContext class when a user opens the edit form.

   Razor

   <DxDataGrid @ref="@grid"
               Data="@Vacancies"
               RowEditStart="@(dataItem => OnRowEditStarting(dataItem))"
               RowInsertStart="@(() => OnRowEditStarting(null))"
               ...>
       ...
   </DxDataGrid>
   

   Code

   @code {
       // ...
       FormEditContext EditContext = null;
       void OnRowEditStarting(Employee employee) {
           EditContext = new FormEditContext(employee);
           EditContext.StateHasChanged += () => { InvokeAsync(StateHasChanged); };
       }
   }
   

4. Use Blazor’s standard EditForm component inside the DxDataGrid‘s EditFormTemplate to enable user input validation. Assign the EditContext object to the EditForm‘s Model property.

   Razor

   <DxDataGrid @ref="@grid"
               Data="@Vacancies"
               ...>
       @* ... *@
       <EditFormTemplate>
           <EditForm Model="@EditContext" OnValidSubmit="@HandleValidSubmit">
               @* ... *@
           </EditForm>
       </EditFormTemplate>
   </DxDataGrid>
   

5. Use the DataAnnotationsValidator component to enable validation via annotation attributes.

   Razor

   <EditFormTemplate>
       <EditForm Model="@EditContext" OnValidSubmit="@HandleValidSubmit">
           <DataAnnotationsValidator />
           @* ... *@
       </EditForm>
   </EditFormTemplate>
   

6. Add the DxFormLayout component to the EditForm and populate it with items.

   Razor

   <EditFormTemplate>
       <EditForm Model="@EditContext" OnValidSubmit="@HandleValidSubmit">
           <DataAnnotationsValidator />
           <DxFormLayout>
               <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                   <DxTextBox @bind-Text="@EditContext.FirstName" />
               </DxFormLayoutItem>
               @* ... *@
           </DxFormLayout>
       </EditForm>
   </EditFormTemplate>
   

7. Use unique Context property values for parent (EditForm) and child (DxFormLayoutItem) components to avoid a name conflict.

   Razor

   <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>
   

8. Add two DxButton components to submit the form and to cancel the row edit. For the first button, set the SubmitFormOnClick property to true.

   Razor

   @* ... *@
   <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>     
   

9. Add the ValidationSummary component to one layout item to summarize and display validation messages.

   Razor

   <DxFormLayoutItem ColSpanMd="12" Context="FormLayoutContext">
           <ValidationSummary />
   </DxFormLayoutItem>             
   

10. In the HandleValidSubmit event handler, save user input to the edit model.

    Code

    @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

Razor

<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>

Code

@using System.ComponentModel.DataAnnotations;

@code {
    DxDataGrid<Employee> grid;
    IEnumerable<Employee> Data { get; set; }
    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetEmployeesEditableAsync();
    }
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if(firstRender) {
            await grid.StartRowEdit(null);
        }
    }
    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; }
    }
    FormEditContext EditContext = null;
    void OnRowEditStarting(Employee employee) {
        EditContext = new FormEditContext(employee);
        EditContext.StateHasChanged += () => { InvokeAsync(StateHasChanged); };
    }
    async Task OnCancelButtonClick() {
        await grid.CancelRowEdit();
        EditContext = null;
    }
    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();
    }
    async Task OnRowRemovingAsync(Employee dataItem) {
        await NwindDataService.RemoveEmployeeAsync(dataItem);
        Data = await NwindDataService.GetEmployeesEditableAsync();
        StateHasChanged();
    }
}

Employee.cs

public partial class Employee {
        public Employee() {
            this.Orders = new List<Order>();
        }
        public int EmployeeId { get; set; }
        public string LastName { get; set; }
        public string FirstName { get; set; }
        public string Title { get; set; }
        public string TitleOfCourtesy { get; set; }
        public Nullable<System.DateTime> BirthDate { get; set; }
        public Nullable<System.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 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";
    }

Run Demo: Data Grid - Validate Input