Example of Data Annotation in Blazor DataGrid Component

DataGrid / Data Binding / Data Annotation

This sample demonstrates the DataGrid component with data annotation feature.

1 of 9 pages (100 items)

Blazor DataGrid is a generic component that can be strongly bound to any business object via data annotation. Data annotation is used to change the display format, validate fields by checking end-user input, and display messages to them by defining rules in model classes.

The user must import the namespace System.ComponentModel.DataAnnotations before using the data annotation. Users can change the Display Format, Header text, Tooltip content, and Filtering options of the Column, Editable, and set any one of the columns should be defined as a primary key using the GridColumn component's IsPrimaryKey property for a specific field using the data annotation attributes. Furthermore, users have the option to convert an empty string to null and display custom text for null values. Annotations also allow users to prevent the column from being automatically generated.

The DataGrid in this demo had been modified as follows.

  • The Grid's columns are generated automatically by a property in the model class.
  • The DisplayAttribute was used to change the column header text.
  • The DisplayFormatAttribute was used to change the display format of the Freight column.
  • Disabled using the EditableAttribute, you can make changes to the property ShipCity.
  • Using the KeyAttribute, the OrderID property's primary key has been set.
  • The RequiredAttribute is used for validation of the property CustomerID.
  • Validation RangeAttribute is applied to the Freight property via the Range attribute.
  • The StringLengthAttribute is used for validation of the property CustomerID.

More information about the Data annotation feature can be found in this documentation section.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE