Blazorise DataGrid: Validations

Easily validate the edited or added row data.

Overview

The DataGrid provides validations of column values at editing or creating items. For using validation of DataGrid you have to use these properties:

  • UseValidation must be set to true to enable validation.
  • ShowValidationFeedback of DataGrid to hide or show feedback for validation.
  • ShowValidationsSummary of DataGrid to hide or show validations summary.
  • ValidationsSummaryLabel of DataGrid to set label of validations summary.
  • Validator of DataGridColumn validates the input value after trying to save.
  • ValidationPattern of DataGridColumn forces validation to use regex pattern matching instead of default validator handler.

Examples

Validations

By default, DataGrid will use data-annotation to validate editing fields. You only need to define them on your model and they will automatically be picked up by the grid. 
public class Employee
{
    [Required]
    public string FirstName { get; set; }

    [Required]
    public string LastName { get; set; }
}
To override data-annotation you only need to define a Validator attribute and assign it to your validation method.
Name
David
Mladen
John
Ana
Jessica
@using System
@using System.Collections.Generic
@using System.ComponentModel.DataAnnotations
@using System.Linq
@using System.Threading.Tasks

<DataGrid TItem="Employee"
          Data="@employeeList"
          Responsive
          Editable
          UseValidation>
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="Name" Validator="@CheckName" Editable />
    <DataGridCommandColumn />
</DataGrid>

@code{
    private List<Employee> employeeList = new() { new() { FirstName = "David" }, new() { FirstName = "Mladen" }, new() { FirstName = "John" }, new() { FirstName = "Ana" }, new() { FirstName = "Jessica" } };

    public void CheckName( ValidatorEventArgs validationArgs )
    {
        ValidationRule.IsNotEmpty( validationArgs );

        if ( validationArgs.Status == ValidationStatus.Error )
        {
            validationArgs.ErrorText = "Name can't be empty.";
        }
    }


    public class Gender
    {
        public string Code { get; set; }
        public string Description { get; set; }
    }

    public class EmployeeData
    {
        private static readonly string[] FirstNames = ["Samuel", "Irvin", "Cora", "Jessie", "Maryann", "Kara"];
        private static readonly string[] LastNames = ["Collier", "Ziemann", "Conn", "Wilkinson", "Hilpert", "Brekke"];
        private static readonly string[] Cities = ["London", "Paris", "New York", "Berlin", "Lisbon", "Zagreb"];

        public static IEnumerable<Gender> Genders =
        [
            new() { Code = null, Description = string.Empty },
            new() { Code = "M", Description = "Male" },
            new() { Code = "F", Description = "Female" },
            new() { Code = "D", Description = "Diverse" }
        ];

        public Task<List<Employee>> GetDataAsync()
            => Task.FromResult( Enumerable.Range( 1, 500 )
                .Select( index =>
                {
                    string firstName = FirstNames[( index - 1 ) % FirstNames.Length];
                    string lastName = LastNames[( index - 1 ) % LastNames.Length];

                    return new Employee
                    {
                        Id = index,
                        FirstName = firstName,
                        LastName = lastName,
                        Email = $"{firstName}.{lastName}{index}@example.com",
                        City = Cities[( index - 1 ) % Cities.Length],
                        Zip = $"{10000 + index}",
                        DateOfBirth = new DateTime( 1950 + index % 50, 1 + index % 12, 1 + index % 28 ),
                        Childrens = index % 6,
                        Gender = index % 3 == 0 ? "D" : index % 2 == 0 ? "F" : "M",
                        Salary = 50000m + index * 137m % 50000m,
                        IsActive = index % 2 == 0,
                        Salaries = Enumerable.Range( 1, index % 4 )
                            .Select( month => new Salary
                            {
                                Date = new DateTime( 2025, month, 1 ),
                                Total = 1000m + index * month * 11m
                            } )
                            .ToList()
                    };
                } )
                .ToList() );
    }

    public class Employee
    {
        public Employee()
        {
        }

        public Employee( Employee other )
        {
            Id = other.Id;
            Childrens = other.Childrens;
            DateOfBirth = other.DateOfBirth;
            City = other.City;
            Email = other.Email;
            FirstName = other.FirstName;
            LastName = other.LastName;
            Gender = other.Gender;
            IsActive = other.IsActive;
            Salaries = other.Salaries;
            Salary = other.Salary;
            Tax = other.Tax;
            Zip = other.Zip;
        }

        [Display( Name = "Id" )]
        public int Id { get; set; }

        [Required]
        public string FirstName { get; set; }

        [Required]
        public string LastName { get; set; }

        [Required]
        [EmailAddress]
        [Display( Name = "Email" )]
        public string Email { get; set; }

        [Display( Name = "City" )]
        public string City { get; set; }

        [Display( Name = "Zip" )]
        public string Zip { get; set; }

        [Display( Name = "DOB" )]
        public DateTime? DateOfBirth { get; set; }

        [Display( Name = "Childrens" )]
        public int? Childrens { get; set; }

        [Display( Name = "Gender" )]
        public string Gender { get; set; }

        [Display( Name = "Salary" )]
        public decimal Salary { get; set; }

        [Display( Name = "Tax" )]
        public decimal Tax
        {
            get
            {
                if ( tax == 0 && Salary > 0 )
                {
                    tax = Salary * TaxPercentage;
                }

                return tax;
            }
            set
            {
                tax = value;
            }
        }

        [Display( Name = "Active" )]
        public bool IsActive { get; set; }

        public List<Salary> Salaries { get; set; } = new();

        public decimal ChildrensPerSalary
            => Salary == 0m
                ? 0m
                : ( Childrens is null || Childrens == 0 ? 1 : Childrens.Value ) / Salary;

        public decimal TaxPercentage = 0.25m;

        private decimal tax;
    }

    public class Salary
    {
        public DateTime Date { get; set; }
        public decimal Total { get; set; }
    }
}
If you use EditTemplate to customize editing of columns, then using Validator or ValidationPattern will not work and you have to use Validation like in the following example:
Name
David
Mladen
John
Ana
Jessica
@using System
@using System.Collections.Generic
@using System.ComponentModel.DataAnnotations
@using System.Linq
@using System.Threading.Tasks

<DataGrid TItem="Employee"
          Data="@employeeList"
          Responsive
          Editable
          UseValidation
          ShowValidationsSummary="false">
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="Name" Editable>
        <EditTemplate>
            <Validation Validator="@CheckName">
                <TextInput Value="@((string)context.CellValue)" ValueChanged="(value => context.CellValue = value)">
                    <Feedback>
                        <ValidationError />
                    </Feedback>
                </TextInput>
            </Validation>
        </EditTemplate>
    </DataGridColumn>
    <DataGridCommandColumn />
</DataGrid>

@code{
    private List<Employee> employeeList = new() { new() { FirstName = "David" }, new() { FirstName = "Mladen" }, new() { FirstName = "John" }, new() { FirstName = "Ana" }, new() { FirstName = "Jessica" } };

    public void CheckName( ValidatorEventArgs validationArgs )
    {
        ValidationRule.IsNotEmpty( validationArgs );

        if ( validationArgs.Status == ValidationStatus.Error )
        {
            validationArgs.ErrorText = "Name can't be empty.";
        }
    }


    public class Gender
    {
        public string Code { get; set; }
        public string Description { get; set; }
    }

    public class EmployeeData
    {
        private static readonly string[] FirstNames = ["Samuel", "Irvin", "Cora", "Jessie", "Maryann", "Kara"];
        private static readonly string[] LastNames = ["Collier", "Ziemann", "Conn", "Wilkinson", "Hilpert", "Brekke"];
        private static readonly string[] Cities = ["London", "Paris", "New York", "Berlin", "Lisbon", "Zagreb"];

        public static IEnumerable<Gender> Genders =
        [
            new() { Code = null, Description = string.Empty },
            new() { Code = "M", Description = "Male" },
            new() { Code = "F", Description = "Female" },
            new() { Code = "D", Description = "Diverse" }
        ];

        public Task<List<Employee>> GetDataAsync()
            => Task.FromResult( Enumerable.Range( 1, 500 )
                .Select( index =>
                {
                    string firstName = FirstNames[( index - 1 ) % FirstNames.Length];
                    string lastName = LastNames[( index - 1 ) % LastNames.Length];

                    return new Employee
                    {
                        Id = index,
                        FirstName = firstName,
                        LastName = lastName,
                        Email = $"{firstName}.{lastName}{index}@example.com",
                        City = Cities[( index - 1 ) % Cities.Length],
                        Zip = $"{10000 + index}",
                        DateOfBirth = new DateTime( 1950 + index % 50, 1 + index % 12, 1 + index % 28 ),
                        Childrens = index % 6,
                        Gender = index % 3 == 0 ? "D" : index % 2 == 0 ? "F" : "M",
                        Salary = 50000m + index * 137m % 50000m,
                        IsActive = index % 2 == 0,
                        Salaries = Enumerable.Range( 1, index % 4 )
                            .Select( month => new Salary
                            {
                                Date = new DateTime( 2025, month, 1 ),
                                Total = 1000m + index * month * 11m
                            } )
                            .ToList()
                    };
                } )
                .ToList() );
    }

    public class Employee
    {
        public Employee()
        {
        }

        public Employee( Employee other )
        {
            Id = other.Id;
            Childrens = other.Childrens;
            DateOfBirth = other.DateOfBirth;
            City = other.City;
            Email = other.Email;
            FirstName = other.FirstName;
            LastName = other.LastName;
            Gender = other.Gender;
            IsActive = other.IsActive;
            Salaries = other.Salaries;
            Salary = other.Salary;
            Tax = other.Tax;
            Zip = other.Zip;
        }

        [Display( Name = "Id" )]
        public int Id { get; set; }

        [Required]
        public string FirstName { get; set; }

        [Required]
        public string LastName { get; set; }

        [Required]
        [EmailAddress]
        [Display( Name = "Email" )]
        public string Email { get; set; }

        [Display( Name = "City" )]
        public string City { get; set; }

        [Display( Name = "Zip" )]
        public string Zip { get; set; }

        [Display( Name = "DOB" )]
        public DateTime? DateOfBirth { get; set; }

        [Display( Name = "Childrens" )]
        public int? Childrens { get; set; }

        [Display( Name = "Gender" )]
        public string Gender { get; set; }

        [Display( Name = "Salary" )]
        public decimal Salary { get; set; }

        [Display( Name = "Tax" )]
        public decimal Tax
        {
            get
            {
                if ( tax == 0 && Salary > 0 )
                {
                    tax = Salary * TaxPercentage;
                }

                return tax;
            }
            set
            {
                tax = value;
            }
        }

        [Display( Name = "Active" )]
        public bool IsActive { get; set; }

        public List<Salary> Salaries { get; set; } = new();

        public decimal ChildrensPerSalary
            => Salary == 0m
                ? 0m
                : ( Childrens is null || Childrens == 0 ? 1 : Childrens.Value ) / Salary;

        public decimal TaxPercentage = 0.25m;

        private decimal tax;
    }

    public class Salary
    {
        public DateTime Date { get; set; }
        public decimal Total { get; set; }
    }
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page