From 09777e054575e3f5f06ce108a5ab28e5fb14dac1 Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Sat, 8 Nov 2025 10:20:54 +0530 Subject: [PATCH 1/2] 991769: Updated the UG content and samples for Editing in Blazor DataGrid --- blazor/datagrid/column-validation.md | 65 ++++++++++------- blazor/datagrid/command-column-editing.md | 38 +++++----- blazor/datagrid/persisting-data-in-server.md | 47 ++++++++----- blazor/datagrid/template-editing.md | 73 ++++++++++---------- 4 files changed, 125 insertions(+), 98 deletions(-) diff --git a/blazor/datagrid/column-validation.md b/blazor/datagrid/column-validation.md index 1967d3dc8f..0972c883ee 100644 --- a/blazor/datagrid/column-validation.md +++ b/blazor/datagrid/column-validation.md @@ -1,7 +1,7 @@ --- layout: post title: Column Validation in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Column Validation in Syncfusion Blazor DataGrid and much more details. +description: Learn about Column Validation in Syncfusion Blazor DataGrid, including setup, validation types, and customization options. platform: Blazor control: DataGrid documentation: ug @@ -9,15 +9,15 @@ documentation: ug # Validation in Blazor DataGrid -Validation is a crucial aspect of data integrity in any application. The Syncfusion® Blazor DataGrid provides built-in support for easy and effective data validation. This feature ensures that the data entered or modified adheres to predefined rules, preventing errors and guaranteeing the accuracy of the displayed information. +Validation is a critical aspect of maintaining data integrity in applications. The Syncfusion® Blazor DataGrid provides built-in support for efficient and 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. ## Column validation -Column validation allows you to validate edited or newly added row data before saving it. This feature is particularly useful when you need to enforce specific rules or constraints on individual columns to ensure data integrity. By applying validation rules to columns, you can display error messages for invalid fields and prevent the saving of erroneous data. This feature leverages the **Form Validator** library to perform validation. You can define validation rules using the [GridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property to specify the criteria for validating column values. +Column validation ensures that edited or newly added row data meets specific criteria before being saved. This feature is useful for enforcing rules or constraints on individual columns to maintain data integrity. Validation rules can be 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 utilizes the **Form Validator** library. -> Validation in Grid works based on the Microsoft Blazor EditForm behavior. Once a validation message is shown, it will be validated again only during form submission or when you focus out from that particular 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 further reference. +> 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. -The following code example demonstrates how to define a validation rule for a Grid column: +The following example demonstrates how to define a validation rule for a Grid column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -88,21 +88,21 @@ public class OrderDetails ## Data annotation -Data annotation validation attributes are used to validate fields in the DataGrid. The following validation attributes are supported in the Grid: +Data annotation validation attributes are used to validate fields in the Syncfusion® Blazor DataGrid. These attributes define validation rules that 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 validation 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 | These data annotation attributes are used as `validation rules` in DataGrid CRUD operations. | For more information on data annotation, refer to this [documentation](https://blazor.syncfusion.com/documentation/datagrid/data-annotation) section. ## Custom validation -Custom validation allows users to define their own validation logic based on specific requirements. +Custom validation enables the definition of validation logic tailored to specific application requirements. -To implement custom validation, create a class that inherits from the `ValidationAttribute` class and override the `IsValid` method. All custom validation logic should be placed inside the `IsValid` method. +To implement custom validation, create a class that inherits from the `ValidationAttribute` class and override the `IsValid` method. All custom validation logic should be placed within the `IsValid` method. -The following sample code demonstrates how to implement custom validation for the **EmployeeID** and **Freight** fields. +The following example demonstrates how to implement custom validation for the **EmployeeID** and **Freight** fields: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -223,9 +223,9 @@ public class CustomValidationFreight : ValidationAttribute ### Validate complex column using data annotation attribute -You can validate complex data binding columns by 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. +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 the following sample, 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 by using the `RequiredAttribute` with a custom error message. +In the following example, 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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -296,22 +296,27 @@ public class EmployeeInfo {% endhighlight %} {% endtabs %} -> Ensure to include the package **Microsoft.AspNetCore.Components.DataAnnotations.Validation** for complex type validation using the following reference: -`` +> Ensure the package **Microsoft.AspNetCore.Components.DataAnnotations.Validation** is included to enable complex type validation. Use the following reference: + +```csharp + + +``` ![Validate Complex Column Using Data Annotation Attribute in Blazor DataGrid.](images/blazor-datagrid-validate-complex-column-using-data-annotation-attribute.gif) ## Custom validator component -In addition to using the default and custom validation options, there may be scenarios where you want to implement your own validator component to validate the Grid edit form. This can be accomplished by using the **Validator** property of the **GridEditSettings** component, which accepts a validation component and injects it inside the **EditForm** of the Grid. Within the **Validator**, you can access the data using the implicit parameter `context`, which is of type [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html). +In scenarios where built-in or attribute-based validation is insufficient, a custom validator component can be implemented to validate the Grid edit form. This is achieved 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) component, which accepts a validation component and injects it into the EditForm of the DataGrid. -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). +Within the custom validator component, data can be accessed using the implicit context parameter, which is of type [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html). -In the following code example: +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). +In the following example: -* A form validator component named `MyCustomValidator` is created, which accepts a [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html) value as a parameter. -* The `MyCustomValidator` component is used inside the **Validator** property. -* This validator component checks whether the Freight value is between 0 and 100. +* 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. ```csharp @@ -400,9 +405,9 @@ public class MyCustomValidator : ComponentBase ## Display validation message using in-built tooltip -In the above code example, the **ValidationMessage** component is used. However, this approach may not be suitable when using Inline editing or Batch editing modes. In such cases, you can use the built-in validation tooltip to display error messages by calling the `ValidatorTemplateContext.ShowValidationMessage(fieldName, isValid, message)` method. +When using **Inline** or **Batch** editing modes in the Syncfusion® Blazor DataGrid, the **ValidationMessage** component may not be suitable for displaying error messages. In such cases, the built-in validation tooltip can be used to show validation messages by invoking the [ValidatorTemplateContext.ShowValidationMessage(fieldName, isValid, message)](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 as shown below. +The `HandleValidation` method of the **MyCustomValidator** component can be updated as shown below: ```c# protected void HandleValidation(FieldIdentifier identifier) @@ -433,7 +438,12 @@ protected void HandleValidation(FieldIdentifier identifier) ## Disable in-built validator component -The **Validator** property can also be used to disable the built-in validator component used by the Syncfusion® Blazor DataGrid. By default, the Grid uses two validator components: **DataAnnotationsValidator** and an internal validator that handles the [ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property for edit form validation. If you want to use only the **DataAnnotationsValidator** component, you can achieve this by using the following code. +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 Syncfusion® Blazor DataGrid. By default, the Grid uses two validator components: + +* DataAnnotationsValidator +* An internal validator that processes the `ValidationRules` property + +To use only the **DataAnnotationsValidator** component and disable the internal validator, configure the Validator property as shown below: ```c# @@ -463,9 +473,10 @@ The **Validator** property can also be used to disable the built-in validator co ## Display validation message in dialog template -Use form validation to display a validation message for a field that is not defined as a column in the Syncfusion® Blazor DataGrid. +Use form validation to show a validation message for a field that is not defined as a column in the Syncfusion® Blazor DataGrid. +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 a field within the dialog template, even if the field is not included in the Grid columns. -You can use the **Validator** property to show a validation message for a field in the dialog template, even if that field is not present in the Grid columns. In the following example, the validation message for **ShipAddress** is displayed in the dialog template, even though the **ShipAddress** field is not defined as a Grid column. +In the following example, the validation message for **ShipAddress** is shown 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. @@ -643,4 +654,6 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/hZBoZChqfqyraNHa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-display-validation-message-in-dialog-template). \ No newline at end of file +> 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 diff --git a/blazor/datagrid/command-column-editing.md b/blazor/datagrid/command-column-editing.md index 95c07e3b38..5005fd1684 100644 --- a/blazor/datagrid/command-column-editing.md +++ b/blazor/datagrid/command-column-editing.md @@ -1,7 +1,7 @@ --- layout: post title: Command Column Editing in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Command Column Editing in Syncfusion Blazor DataGrid and much more details. +description: Learn how to configure Command Column Editing in Syncfusion Blazor DataGrid with setup, usage, and customization tips. platform: Blazor control: DataGrid documentation: ug @@ -9,12 +9,14 @@ documentation: ug # Command column editing in Blazor DataGrid -The command column editing feature allows you to add CRUD (Create, Read, Update and Delete) action buttons in a column for performing operations on individual rows. This feature is commonly used when you want to enable inline editing, deletion, or saving of row changes directly within the Grid. +The command column editing feature enables CRUD (Create, Read, Update, and Delete) action buttons in a column to perform operations on individual rows. This approach is useful for inline editing, deletion, or saving changes directly within the Grid. -To enable command column editing, use the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. By defining this property, you can specify the command buttons to display in the command column, such as Edit, Delete, Save, and Cancel. +To enable command column editing, use the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. This property allows you to define which command buttons—such as Edit, Delete, Save, and Cancel—should appear in the command column. The available built-in command buttons are: +The available built-in command buttons: + | Command Button | Action | |---------------|-----------------------------| | Edit | Edit the current row. | @@ -22,7 +24,7 @@ The available built-in command buttons are: | Save | Update the edited row. | | Cancel | Cancel the edit operation. | -Here's an example that demonstrates how to add CRUD action buttons in a column using the `GridCommandColumns` property: +The following example demonstrates how to add CRUD action buttons in a column using the [GridCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridCommandColumns.html) property: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -99,11 +101,11 @@ public class OrderDetails ## Custom command column -The custom command column feature in the Syncfusion® Blazor DataGrid allows you to add custom command buttons in a column to perform specific actions on individual rows. This feature is particularly useful when you need to provide customized functionality for editing, deleting, or performing any other operation on a row. +The custom command column feature in the Syncfusion® Blazor DataGrid enables the addition of custom command buttons in a column to perform specific actions on individual rows. This feature is useful for implementing customized functionality such as editing, deleting, or executing other operations on a row. -To add custom command buttons in a column, you can utilize the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. Furthermore, you can define the actions associated with these custom buttons using the [CommandClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CommandClicked) event. +To add custom command buttons, configure the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. Define the actions for these buttons using the [CommandClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CommandClicked) event. -Here's an example that demonstrates how to add custom command buttons using the `GridCommandColumns` property and customize the button click behavior to display Grid details in a dialog using the `CommandClicked` event: +The following example demonstrates how to add custom command buttons using the [GridCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridCommandColumns.html) property and configure the `CommandClicked` event to display Grid details in a dialog: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -204,18 +206,18 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/htVoDiBhCEmvtthU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The Syncfusion® Blazor DataGrid does not support adding a new record using the command column. This is because the command column and its buttons are rendered only after a record is created. As a result, the Grid supports only edit, delete, cancel, and update options in the command column. +> The Syncfusion® Blazor DataGrid does not support **adding new records** using the command column. This limitation exists because the command column and its buttons are rendered only after a record is created. Therefore, the command column supports only **edit**, **delete**, **cancel**, and **update** operations. -## Hide the command column button in a specific record +## Hide command column button in specific records -In the Syncfusion® Blazor DataGrid, command columns are used to perform CRUD operations on records, such as editing or deleting. Sometimes, you may want to hide the command buttons for specific records based on certain conditions. This can be done by using the [`RowDataBound`](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event, which is triggered every time a row is created or updated in the Grid. +In the Syncfusion® Blazor DataGrid, command columns are used to perform CRUD operations on records, such as editing or deleting. In certain scenarios, command buttons must be hidden for specific records based on defined conditions. This behavior can be achieved using the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event, which is triggered whenever a row is created or updated in the Grid. -This is demonstrated in the following steps where the `RowDataBound` event is triggered when a record is created. Based on the record details, you can add a specific class name to that row and hide the command buttons using CSS styles. +The following steps demonstrate how to conditionally hide command buttons: -* Use the `RowDataBound` event of the Grid to access each row's data at the time of rendering. -* Inside the event, check the value of the **Verified** column for the current record. -* Based on the value of the **Verified** column, if Verified is **false**, only the **Edit** button will be shown; otherwise **Delete** button will be shown. -* In order to hide buttons (**display: none** style to the buttons), CSS class is applied to the row inside the `RowDataBound` event based on the record condition using `addClass` method, and corresponding CSS rules are defined to hide the respective command buttons. +* Use the `RowDataBound` event of the Grid to access each row's data during rendering. +* Check the value of the **Verified** column for the current record. +* If the **Verified** value is **false**, display only the **Edit** button; otherwise, display the **Delete** button. +* To hide buttons, apply a CSS class to the row using the `addClass` method inside the `RowDataBound` event based on the record condition. Define corresponding CSS rules to apply the style to the respective command buttons. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -240,11 +242,11 @@ This is demonstrated in the following steps where the `RowDataBound` event is tr