From 4537fbf6ac6c14eee18875017fbc79f269db8c38 Mon Sep 17 00:00:00 2001 From: SanjayKumarSuresh Date: Thu, 10 Sep 2026 19:57:26 +0530 Subject: [PATCH 1/2] 1052019: Column Validation --- .../blazor/data-grid/column-validation.md | 114 ++++++++++-------- 1 file changed, 66 insertions(+), 48 deletions(-) diff --git a/grid-sdk/blazor/data-grid/column-validation.md b/grid-sdk/blazor/data-grid/column-validation.md index d58b9e4c4..c84c50bec 100644 --- a/grid-sdk/blazor/data-grid/column-validation.md +++ b/grid-sdk/blazor/data-grid/column-validation.md @@ -1,23 +1,23 @@ --- layout: post -title: Column Validation in Blazor DataGrid | Syncfusion® -description: Learn about Column Validation in Blazor DataGrid, including setup, validation types, and customization options. -platform: grid-sdk +title: Blazor Grid Column Validation | Syncfusion +description: Learn how to use column validation in Blazor Data Grid using built-in validation rules, custom validators, editing validation, and error message customization. +platform: Blazor control: DataGrid documentation: ug --- -# Validation in Blazor DataGrid +# Column validation in Blazor Data Grid -Validation is essential for maintaining data integrity in applications. The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides built-in support for reliable data validation. This feature ensures that entered or modified data adheres to predefined rules, helping prevent errors and maintain the accuracy of displayed information. +Validation is essential for maintaining data integrity in applications. The [Blazor Data Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides built-in support for reliable data validation. The feature ensures that entered or modified data adheres to predefined rules, helping prevent errors and maintain the accuracy of displayed information. ## Column validation -Column validation ensures that edited or newly added row data meets specific criteria before being saved. This feature helps enforce rules or constraints on individual columns to maintain data integrity. +Column validation rules ensure that edited or newly added row data meets specific criteria before saving. Validation rules enforce constraints on individual columns and maintain data integrity. -Validation rules are defined using the [GridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property, which specifies the conditions for validating column values. The validation mechanism uses the **Form Validator** library. +Validation rules are defined using the [GridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property, which specifies rules that validate column values. The validation mechanism uses the built-in `FormValidator` component. -> Validation in the DataGrid is based on the Microsoft Blazor EditForm behavior. Once a validation message is displayed, the field is revalidated only during form submission or when focus is moved away from the field. Refer to the [Microsoft Validation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-5.0#data-annotations-validator-component-and-custom-validation) documentation for additional details. +> Validation in the Data Grid is based on the Microsoft Blazor `EditForm` component. Once a validation message is displayed, the field is revalidated only during form submission or when focus is moved away from the field. Refer to the [Microsoft Validation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation#data-annotations-validator-component-and-custom-validation) documentation for additional details. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -41,7 +41,7 @@ Validation rules are defined using the [GridColumn.ValidationRules](https://help } } {% endhighlight %} -{% highlight c# tabtitle="OrderDetails.cs" %} +{% highlight csharp tabtitle="OrderDetails.cs" %} public class OrderDetails { public static List Order = new List(); @@ -84,25 +84,25 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVyjCrhrHDetIYc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhdtQXiTPWUFndp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Data annotation -Data annotation validation attributes are used to validate fields in the Blazor DataGrid. These attributes define validation rules that are applied during CRUD operations to ensure data integrity. +Data annotation attributes define validation rules for fields in the Blazor Data Grid. These rules are applied during CRUD operations to ensure data integrity. | Attribute Name | Functionality | |---------------|--------------| -| 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 | These data annotation attributes are used as `validation rules` in DataGrid CRUD operations. | +| 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 attributes are used as `validation rules` in Data Grid CRUD operations. | > For more details, refer to the [Data Annotation](https://blazor.syncfusion.com/documentation/datagrid/data-annotation) documentation. ## Custom validation -Custom validation enables the definition of validation logic tailored to specific application requirements. +Custom validation lets you define validation logic for specific application requirements. To implement custom validation, define a class that inherits from the `ValidationAttribute` class and override the **IsValid** method. All validation logic should be placed within the **IsValid** method. -In this configuration, custom validation is applied to the **EmployeeID** and **Freight** fields. +Custom validation applies to the **EmployeeID** and **Freight** fields. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -128,7 +128,8 @@ In this configuration, custom validation is applied to the **EmployeeID** and ** } } {% endhighlight %} -{% highlight c# tabtitle="OrderDetails.cs" %} +{% highlight csharp tabtitle="OrderDetails.cs" %} +using System.ComponentModel.DataAnnotations; public class OrderDetails { public static List Order = new List(); @@ -174,7 +175,7 @@ public class OrderDetails public class CustomValidationEmployeeID : ValidationAttribute { - protected override ValidationResult IsValid(object value, ValidationContext validationContext) + protected override ValidationResult? IsValid(object? value, ValidationContext validationContext) { if (value != null) { @@ -197,7 +198,7 @@ public class CustomValidationEmployeeID : ValidationAttribute public class CustomValidationFreight : ValidationAttribute { - protected override ValidationResult IsValid(object value, ValidationContext validationContext) + protected override ValidationResult? IsValid(object? value, ValidationContext validationContext) { if (value != null) { @@ -220,24 +221,33 @@ public class CustomValidationFreight : ValidationAttribute {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrojMBhUyZJfcXd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhxNmtMJPgbJPho?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Validate complex column using data annotation attribute Complex data binding columns can be validated using the [ValidateComplexType](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-5.0#data-annotations-validator-component-and-custom-validation) attribute from data annotations. -In this configuration, the `ValidateComplexType` attribute is applied to the **EmployeeName** class to enable validation of its properties. A custom validation message is displayed in the **First Name** column using the `RequiredAttribute` with a custom error message. +The `ValidateComplexType` attribute enables validation of nested properties in the **EmployeeInfo** class. A custom validation message for the **FirstName** property uses `RequiredAttribute`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Inputs - - + + + + + + + + + + @@ -250,7 +260,7 @@ In this configuration, the `ValidateComplexType` attribute is applied to the **E } } {% endhighlight %} -{% highlight c# tabtitle="EmployeeDetails.cs" %} +{% highlight csharp tabtitle="EmployeeDetails.cs" %} using System.ComponentModel.DataAnnotations; public class EmployeeDetails @@ -297,29 +307,29 @@ public class EmployeeInfo {% endhighlight %} {% endtabs %} -> Ensure the package **Microsoft.AspNetCore.Components.DataAnnotations.Validation** is referenced to enable complex type validation. Use the following declaration: +> Reference the package **Microsoft.AspNetCore.Components.DataAnnotations.Validation** to support complex type validation. Use the declaration below: ```csharp ``` -![Validate Complex Column Using Data Annotation Attribute in Blazor DataGrid.](images/blazor-datagrid-validate-complex-column-using-data-annotation-attribute.webp) +![Validate Complex Column Using Data Annotation Attribute in Blazor Data Grid.](images/blazor-datagrid-validate-complex-column-using-data-annotation-attribute.webp) ## Custom validator component -In scenarios where built-in or attribute-based validation is insufficient, a custom validator component can be used to validate the Grid edit form. This is configured using the [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) , which accepts a validation component and injects it into the EditForm of the DataGrid. +In scenarios where built-in or attribute-based validation is insufficient, a custom validator component can be used to validate the Grid edit form. The [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) accepts a validation component and injects the component into the EditForm of the Blazor Data Grid. Within the custom validator component, data can be accessed using the implicit context parameter of type [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html). -In this configuration: +The custom validator includes four behaviors: - A form validator component named **MyCustomValidator** is created, accepting a `ValidatorTemplateContext` value as a parameter. -- The **MyCustomValidator** component is assigned to the `Validator` property. -- The component validates whether the **Freight** value is between **0** and **100**. -- Validation error messages are displayed using the **ValidationMessage** component. +- The **MyCustomValidator** component is rendered inside the `Validator` template. +- **Freight** values must fall in the range from **0** to **100** inclusive. +- The component displays validation error messages using the **ValidationMessage** component. -> For guidance on creating a form validator component, refer to the official [documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-and-input-components?view=aspnetcore-5.0#validator-components). +> For guidance on creating a form validator component, refer to the [Microsoft validator components documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-and-input-components?view=aspnetcore-5.0#validator-components). ```csharp [MyCustomValidator.cs] @@ -371,7 +381,7 @@ public class MyCustomValidator : ComponentBase } ``` -```csharp +```razor [Index.razor] @@ -403,15 +413,15 @@ public class MyCustomValidator : ComponentBase } ``` -![Blazor DataGrid with Custom Validator in Editing.](images/blazor-datagrid-custom-validator-in-editing.webp) +![Blazor Data Grid with Custom Validator in Editing.](images/blazor-datagrid-custom-validator-in-editing.webp) -## Display validation message using in-built tooltip +## Display validation message using built-in tooltip -When using [Inline](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing) or [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) editing modes in the Blazor DataGrid, the **ValidationMessage** component may not be suitable for displaying error messages. In such cases, the built-in validation tooltip can be used by invoking the [ShowValidationMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html#Syncfusion_Blazor_Grids_ValidatorTemplateContext_ShowValidationMessage) method. +When using [Inline](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing) or [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) editing modes in the Blazor Data Grid, the **ValidationMessage** component may not be suitable for displaying error messages. The built-in validation tooltip can be used by invoking the [ShowValidationMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html#Syncfusion_Blazor_Grids_ValidatorTemplateContext_ShowValidationMessage) method. -The **HandleValidation** method of the **MyCustomValidator** component can be updated to display validation messages using tooltips, as shown below: +Update the **HandleValidation** method in the **MyCustomValidator** component to display validation messages using tooltips: -```c# +```csharp protected void HandleValidation(FieldIdentifier identifier) { if (identifier.FieldName.Equals("Freight")) @@ -436,20 +446,20 @@ protected void HandleValidation(FieldIdentifier identifier) } ``` -![Blazor DataGrid with Custom Validator in Editing.](images/blazor-datagrid-custom-validator.webp) +![Blazor Data Grid with Custom Validator in Editing.](images/blazor-datagrid-custom-validator.webp) -## Disable in-built validator component +## Disable built-in validator component -The [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) component can be used to disable the built-in `Validator` component in the Blazor DataGrid. +The [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) component can be used to disable the built-in `Validator` component in the Blazor Data Grid. -By default, the Grid uses two validator components: +The Data Grid uses two validator components by default: - DataAnnotationsValidator - An internal validator that processes the [ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property -To use only the **DataAnnotationsValidator** component and disable the internal validator, configure the Validator property as shown below: +To use only the **DataAnnotationsValidator** component and disable the internal validator, configure the `Validator` property with the declaration below: -```c# +```razor @@ -477,9 +487,9 @@ To use only the **DataAnnotationsValidator** component and disable the internal ## Display validation message in dialog template -The Blazor DataGrid supports form validation for fields that are not defined as columns. The [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property can be used to display a validation message for such fields within the [dialog template](https://blazor.syncfusion.com/documentation/datagrid/template-editing#dialog-template-editing). +The Blazor Data Grid supports form validation for fields that are not defined as columns. The [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property can be used to display a validation message for fields not defined as columns within the [dialog template](https://blazor.syncfusion.com/documentation/datagrid/template-editing#dialog-template-editing). -In this configuration, the validation message for **ShipAddress** is displayed in the dialog template, although the **ShipAddress** field is not defined as a Grid column. +In the dialog-template configuration, the validation message for **ShipAddress** is displayed in the dialog template, although the **ShipAddress** field is not defined as a Grid column. > Validation messages for fields not defined in the Grid columns will appear as a validation summary at the top of the dialog edit form. @@ -598,7 +608,7 @@ In this configuration, the validation message for **ShipAddress** is displayed i }; } {% endhighlight %} -{% highlight c# tabtitle="OrderDetails.cs" %} +{% highlight csharp tabtitle="OrderDetails.cs" %} public class OrderDetails { public static List Order = new List(); @@ -617,7 +627,7 @@ public class OrderDetails { if (Order.Count == 0) { - Order.Add(new OrderDetails(10248, "VINET", 32.38, "France", "Vins et alcools Chevalier", "Reims", "59 rue de l Abbaye", new DateTime(1996, 7, 4))); + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France", "Vins et alcools Chevalier", "Reims", "59 rue de l'Abbaye", new DateTime(1996, 7, 4))); Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany", "Toms Spezialitäten", "Münster", "Luisenstr. 48", new DateTime(1996, 7, 5))); Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil", "Hanari Carnes", "Rio de Janeiro", "Rua do Paço, 67", new DateTime(1996, 7, 8))); Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France", "Victuailles en stock", "Lyon", "2, rue du Commerce", new DateTime(1996, 7, 8))); @@ -655,8 +665,16 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBoZChqfqyraNHa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBdtQNsJldNlFzC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} > A fully working sample is available [here](https://github.com/SyncfusionExamples/blazor-datagrid-display-validation-message-in-dialog-template). -N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file +N> Refer to the [Blazor Data Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor Data Grid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=fluent2) to understand data presentation and manipulation. + +## See also + +* [Normal editing](./in-line-editing.md) +* [Template editing](./template-editing.md) +* [Cell editing](./cell-editing.md) +* [Batch editing](./batch-editing.md) +* [Dialog editing](./dialog-editing.md) \ No newline at end of file From 1a9cba72d9581f6e0682a972f5853fda166d6d5f Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh <93911504+sanjaykumar-suresh@users.noreply.github.com> Date: Thu, 10 Sep 2026 20:00:13 +0530 Subject: [PATCH 2/2] 1052019: platform changes --- grid-sdk/blazor/data-grid/column-validation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/grid-sdk/blazor/data-grid/column-validation.md b/grid-sdk/blazor/data-grid/column-validation.md index c84c50bec..577475b1f 100644 --- a/grid-sdk/blazor/data-grid/column-validation.md +++ b/grid-sdk/blazor/data-grid/column-validation.md @@ -2,7 +2,7 @@ layout: post title: Blazor Grid Column Validation | Syncfusion description: Learn how to use column validation in Blazor Data Grid using built-in validation rules, custom validators, editing validation, and error message customization. -platform: Blazor +platform: grid-sdk control: DataGrid documentation: ug --- @@ -677,4 +677,4 @@ N> Refer to the [Blazor Data Grid](https://www.syncfusion.com/blazor-components/ * [Template editing](./template-editing.md) * [Cell editing](./cell-editing.md) * [Batch editing](./batch-editing.md) -* [Dialog editing](./dialog-editing.md) \ No newline at end of file +* [Dialog editing](./dialog-editing.md)