DxDataGrid<T>.EditFormTemplate Property

Specifies a template used to display the edit form.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.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

This example demonstrates how to implement a custom edit form with input validation. The complete source code is available at the end.

Grid EditFormTemplate

  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.

    <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>
    
  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.
    @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 EditConext object of the FormEditContext class when a user opens the edit form.

    <DxDataGrid @ref="@grid"
                Data="@Vacancies"
                RowEditStart="@(dataItem => OnRowEditStarting(dataItem))"
                RowInsertStart="@(() => OnRowEditStarting(null))"
                ...>
        ...
    </DxDataGrid>
    
  4. Use Blazor’s standard EditForm component inside the DxDataGrid‘s EditFormTemplate to enable user input validation. Assign the EditConext object to the EditForm‘s Model property.

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

    <EditFormTemplate>
        <EditForm Model="@EditContext" OnValidSubmit="@HandleValidSubmit">
            <DataAnnotationsValidator />
            <!-- ... -->
        </EditForm>
    </EditFormTemplate>
    
  6. 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>
    
  7. 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>
    
  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.

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

    <DxFormLayoutItem ColSpanMd="12" Context="FormLayoutContext">
            <ValidationSummary />
    </DxFormLayoutItem>             
    
  10. 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>

Run Demo: Data Grid - Validate Input

See Also