Grid for Blazor - How to implement custom validation

This example demonstrates how to create a custom validator component and use it to validate DevExpress Blazor Grid data. In the example, the MyCustomValidator component checks the Title field value and displays an error message if the value does not contain the Sales word.

Overview

Follow the steps below to implement custom validation in a Grid component:

1. Add a Grid component to a page and bind the component to data.

2. Enable edit operations in the Grid as described in the following topic: Edit Data in Blazor Grid.

3. Create a validator component that stores names of the fields that failed validation and the corresponding validation messages. Implement a DataItemValidating event that accepts the edit model and a dictionary for field names and error messages as arguments. Invoke the event when the edit context's OnValidationRequested and OnFieldChanged events occur.

   public class MyCustomValidator : ComponentBase {
       private ValidationMessageStore MessageStore;
       [CascadingParameter]
       private EditContext CurrentEditContext { get; set; }
       [Parameter]
       public Action<ValidationMessageStoreEventArgs> DataItemValidating { get; set; }
   
       protected override void OnInitialized() {
           MessageStore = new(CurrentEditContext);
           CurrentEditContext.OnValidationRequested += (s, e) => ValidateData();
           CurrentEditContext.OnFieldChanged += (s, e) => ValidateData();
       }
       void ValidateData() {
           if (DataItemValidating == null)
               return;
           var errors = new Dictionary<string, List<string>>();
           var args = new ValidationMessageStoreEventArgs(CurrentEditContext.Model, errors);
           DataItemValidating.Invoke(args);
           // ...
       }
   }

4. Declare the validator component in the Grid's CustomValidators template. In the validator component's DataItemValidating event handler, check field values and add error messages with names of the fields that failed validation to the dictionary.

   <DxGrid>
       <!-- ... -->
       <CustomValidators>
           <MyCustomValidator DataItemValidating="ValidateGridData" />
       </CustomValidators>
   </DxGrid>
   
   @code {
       void ValidateGridData(ValidationMessageStoreEventArgs e) {
           var employee = (Employee)e.EditModel;
           if (employee.Title == null || !employee.Title.Contains("Sales")) {
               e.AddError(nameof(employee.Title), "The Title field value should contain 'Sales'.");
           }
       }
   }

5. After you handle the DataItemValidating event, get the dictionary from the event arguments and copy data from this dictionary to the validation message store. Call the edit context's NotifyValidationStateChanged method to notify the Grid about the validation state change and display error messages.

   void ValidateData() {
       if (DataItemValidating == null)
           return;
       var errors = new Dictionary<string, List<string>>();
       var args = new ValidationMessageStoreEventArgs(CurrentEditContext.Model, errors);
       DataItemValidating.Invoke(args);
       
       MessageStore.Clear();
       foreach (var error in errors)
           MessageStore.Add(CurrentEditContext.Field(error.Key), error.Value);
       CurrentEditContext.NotifyValidationStateChanged();
   }

Files to Review

• Index.razor
• CustomValidator.cs

Documentation

• Bind Blazor Grid to Data
• Validate User Input in Blazor Grid
• Grid Examples

More Examples

• Grid for Blazor - How to bind the component to data with Entity Framework Core
• Grid for Blazor - Restrict data editing to rows that match specific conditions
• Grid for Blazor - Create an edit form and modify grid data on a separate page

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)