Search results

Data Annotation

Data Annotations helps us to define rules to the model classes or properties to perform data validation and display suitable messages to end users.

The Data Annotation can be enabled by referencing the System.ComponentModel.DataAnnotations namespace which maps the data annotations to the corresponding Grid Column property.

The list of data annotation attributes that are supported in Grid component are provided below,

Attribute Name Functionality
DisplayFormat Sets ‘DisplayFormat’ property for the Grid column to be rendered.
DisplayName Sets the display name for the Grid column.
ReadOnly Sets AllowEditing for a particular column
Key Sets PrimaryKey in Grid Columns
Validations are,

1. RequiredAttribute
2. StringLengthAttribute
3. RangeAttribute
4. RegularExpressionAttribute
5. MinLengthAttribute
6. MaxLengthAttribute
7. EmailAddressAttribute
8. CompareAttribute
9. DataTypeAttribute
10. DataType.Custom
11. DataType.Date
12. DataType.DateTime
13. DataType.EmailAddress
14. DataType.ImageUrl
15. DataType.Url
The data annotation validation attributes are used as validation rules in the Grid CRUD operations

Grid Property has more priority than Data Annotation. For Instance, if DisplayName Attribute is set to a Field in Grid Model class and also HeaderText is set to the same Grid column property, then the value of HeaderText property will be considered and shown in the Grid header.

The following sample code demonstrates data annotations implemented in the Grid component,

@using Syncfusion.EJ2.Blazor.Grids
@using System.ComponentModel.DataAnnotations;

<EjsGrid TValue="Order" DataSource="@Orders" Height="315" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) EditType="EditType.DatePickerEdit" Format="yMd" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" TextAlign="TextAlign.Right" Format="C2" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        // Sets column as primary key
        [Key]
        // Sets header text to the column
        [Display(Name = "Order ID")]
        public int OrderID { get; set; }
        [Display(Name = "Customer Name")]
        // Sets column as required and error message to be displayed when empty
        [Required(ErrorMessage = "Field should not be empty")]
        public string CustomerID { get; set; }
        // Sets data type of column as Date
        [DataType(DataType.Date)]
        [Display(Name = "Order Date")]
        // Sets column as read only
        [Editable(false)]
        public DateTime? OrderDate { get; set; }
        [Display(Name = "Freight")]
        public double? Freight { get; set; }
    }
}

The following image represents data annotations enabled in the Grid columns, Data Annotations