Data Annotation in Grid Component

21 Dec 20228 minutes to read

Data Annotation helps you define rules for the model class to perform data validation and display suitable messages to end users as validation message in the edit form.

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

NOTE

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

CSHTML

<ejs-grid id="Grid" TValue="ViewBag.Type" dataSource="ViewBag.DataSource" enableStickyHeader="true" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })">
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
        <e-grid-column field="EmployeeID" type="string" width="120"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="ShipCity" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

Annotation.cs

namespace DataAnnotation.Controllers
{
    public class HomeController : Controller
    {
        public static List<Orders> order = new List<Orders>();
        public ActionResult Index()
        {
            ViewBag.DataSource = Orders.getAllRecords().ToList();
            ViewBag.Type = typeof(Orders);
            return View();
        }
        public class Orders
        {

            public Orders(long OrderId, string Customerid, int EmployeeId, double Freight, string ShipCity)
            {
                this.OrderID = OrderId;
                this.CustomerID = Customerid;
                this.EmployeeID = EmployeeId;
                this.Freight = Freight;
                this.ShipCity = ShipCity;
            }

            public static List<Orders> getAllRecords()
            {
                if (order.Count == 0)
                {
                    int code = 10000;
                    for (int i = 1; i < 2; i++)
                    {
                        order.Add(new Orders(code + 1, "ALFKI", i + 0, 2.3 * i, "Berlin"));
                        order.Add(new Orders(code + 2, "ANATR", i + 2, 3.3 * i, "Madrid"));
                        order.Add(new Orders(code + 3, "ANTON", i + 1, 4.3 * i, "Cholchester"));
                        order.Add(new Orders(code + 4, "BLONP", i + 3, 5.3 * i, "Marseille"));
                        order.Add(new Orders(code + 5, "BOLID", i + 4, 6.3 * i, "Tsawassen"));
                        code += 5;
                    }
                }
                return order;
            }
            [Key]
            [Display(Name = "Order ID")]
            [Required(ErrorMessage = "Order ID is required")]
            public long OrderID { get; set; }
            [Display(Name = "Customer ID")]
            [Required(ErrorMessage = "Customer ID is required")]
            [StringLength(8, MinimumLength = 3, ErrorMessage = "Customer ID length should between 3 and 8")]
            public string CustomerID { get; set; }
            [Display(Name = "Employee ID")]
            [Range(1, 10, ErrorMessage = "Employee ID should be between 1 and 10")]
            public int EmployeeID { get; set; }
            [DisplayFormat(DataFormatString = "c2")]
            [Range(1, 1000, ErrorMessage = "Freight should be between 1 and 1000")]
            public double Freight { get; set; }
            [Display(Name = "Ship City")]
            [Editable(false)]
            public string ShipCity { get; set; }
        }
    }
}