From 48c6923904458c0bfa5c84eadf4b84df71712859 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Mon, 22 Sep 2025 17:26:58 +0530 Subject: [PATCH 1/7] 983239: Editing file updated --- blazor/treegrid/editing/cell-editing.md | 13 ++--- blazor/treegrid/editing/column-validation.md | 51 +++++++++---------- .../editing/command-column-editing.md | 16 +++--- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/blazor/treegrid/editing/cell-editing.md b/blazor/treegrid/editing/cell-editing.md index fae59fd925..3f9edb43ea 100644 --- a/blazor/treegrid/editing/cell-editing.md +++ b/blazor/treegrid/editing/cell-editing.md @@ -1,15 +1,16 @@ --- layout: post -title: Cell Editing in Blazor Tree Grid Component | Syncfusion -description: Checkout and learn here all about Cell Editing in Syncfusion Blazor Tree Grid component and much more details. +title: Cell Editing in Blazor TreeGrid Component | Syncfusion +description: Learn how to enable and use cell editing in the Syncfusion Blazor TreeGrid component, including configuring EditMode.Cell, committing or canceling edits, and related settings. platform: Blazor -control: Tree Grid +control: TreeGrid documentation: ug --- -# Cell Editing in Blazor Tree Grid Component +# Cell Editing in Blazor TreeGrid Component + +In Cell edit mode, double-click a cell to begin editing. After editing, the value is committed to the data source when the edit is saved. To enable **Cell** editing, set [TreeGridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridEditSettings_Mode) to Cell and ensure `AllowEditing` is true. -In Cell edit mode, when a cell is double clicked, it is changed to edit state. The cell value can be changed and saved to the data source. To enable Cell edit, set the [TreeGridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridEditSettings_Mode) as **Cell**. {% tabs %} @@ -79,4 +80,4 @@ public class TreeData ![Cell Editing in Blazor TreeGrid](../images/blazor-treegrid-cell-edit.png) -N> Cell edit mode is default mode of editing. \ No newline at end of file +N> The default edit mode is Row. To use Cell editing, set EditMode to Cell. \ No newline at end of file diff --git a/blazor/treegrid/editing/column-validation.md b/blazor/treegrid/editing/column-validation.md index 58272d8a1a..db57148b5c 100644 --- a/blazor/treegrid/editing/column-validation.md +++ b/blazor/treegrid/editing/column-validation.md @@ -1,15 +1,17 @@ --- layout: post title: Column Validation in Blazor TreeGrid Component | Syncfusion -description: Checkout and learn here all about column validation in Syncfusion Blazor TreeGrid component and much more details. +description: Learn how to configure column validation in the Syncfusion Blazor TreeGrid component using ValidationRules, data annotations, custom validator components, disabling the built-in validator, and displaying validation messages in dialog templates. platform: Blazor -control: Tree Grid +control: TreeGrid documentation: ug --- # Column validation in Blazor TreeGrid Component -Column validation allows to validate the edited or added row data and it displays errors for invalid fields before saving data. Tree Grid uses **Form Validator** component for column validation. The validation rules can be set by defining the [TreeGridColumn. ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~ValidationRules.html). +Column validation validates edited or added row data and displays errors for invalid fields before saving. TreeGrid uses the **Form Validator** component for column validation. Define validation rules using the [TreeGridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~ValidationRules.html) property. + +N> Prerequisites: enable editing in [TreeGridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html) as needed (AllowEditing/AllowAdding/AllowDeleting), and define a primary key column (IsPrimaryKey) to support CRUD operations. ```cshtml @using TreeGridComponent.Data; @@ -85,15 +87,14 @@ Toolbar="@(new List() { "Add", "Edit", "Delete", "Update", "Cancel" })"> } ``` +The following image shows column validation errors displayed for the Progress field. ![Column Validation in Blazor TreeGrid](../images/blazor-treegrid-column-validation.png) ## Custom validation -Custom validation allows the users to customize the validations manually according to the user's criteria. - -Custom validation can be used by overriding the IsValid method inside the class that inherits the Validation Attribute. All the validations are done inside the IsValid method. The same class should be set as a attribute to the specific field property of the tree grid's datasource model class. +Custom validation enables implementing validations based on application-specific rules. -The following sample code demonstrates custom validations implemented in the fields `Duration` and `Priority` . +Create a validation attribute by inheriting from ValidationAttribute and overriding the IsValid method. Apply the attribute to the corresponding model property in the TreeGrid data source class. The example below applies custom validations to the `Duration` and `Priority` fields. ```cshtml @using TreeGridComponent. Data; @@ -206,16 +207,15 @@ namespace TreeGridComponent. Data ## Custom validator component -Apart from using default validation and custom validation, there are cases where you might want to use your validator component to validate the tree grid edit form. Such cases can be achieved using the `Validator` property of the `TreeGridEditSettings` component which accepts a validation component and inject it inside the `EditForm` of the tree grid. Inside the `Validator` , you can access the data using the implicit named parameter context which is of type [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html). +In addition to built-in validation and custom attributes, a custom validator component can validate the TreeGrid edit form. Use the `Validator` property of the `TreeGridEditSettings` component to inject a validator component into the edit form. Within the `Validator`, access form state and show messages using the implicit `context` parameter of type [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html). For creating a form validator component you can refer [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0#validator-components). -In the below code example, the following things have been done. - -* Created a form validator component named `MyCustomValidator` which accepts [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html) value as parameter. -* Used the `MyCustomValidator` component inside the `Validator` property. -* This validator component will check whether Duration value is in between 0 to 30. -* Displayed the validation error messages using `ValidationMessage` component. +In the following example: +- A custom form validator component named `MyCustomValidator` accepts a [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html) parameter. +- The `MyCustomValidator` component is used inside the `Validator` property. +- The validator checks whether the Duration value is between 0 and 30. +- Validation errors are displayed using the `ValidationMessage` component. {% tabs %} @@ -381,15 +381,14 @@ namespace TreeGridComponent. Data {% endtabs %} -The output will be as follows. - +The following image shows a TreeGrid using a custom validator component in a dialog edit form. ![Blazor TreeGrid with Custom Validator](../images/blazor-treegrid-custom-validator.png) ## Display validation message using in-built tooltip -In the above code example, you can see that `ValidationMessage` component is used, this might be not suitable when using Inline editing or batch editing. In such cases, you can use the in-built validation tooltip to show those error messages by using `ValidatorTemplateContext.ShowValidationMessage(fieldName, IsValid, Message)` method. +When using inline or batch editing, placing `ValidationMessage` elements in the template may not be ideal. In such cases, use the built-in validation tooltip by calling the `ValidatorTemplateContext.ShowValidationMessage(fieldName, IsValid, Message)` method. -Now, HandleValidation method of the MyCustomValidator component would be changed like below. +The following snippet shows the updated `HandleValidation` method of the `MyCustomValidator` component to display tooltip messages. {% tabs %} @@ -426,13 +425,12 @@ protected void HandleValidation(FieldIdentifier identifier) {% endtabs %} -The output will be as follows. - +The following image shows tooltip-based validation messages for a TreeGrid field. ![Blazor TreeGrid with Custom Validator](../images/blazor-treegrid-with-custom-validator.png) ## Disable in-built validator component -`Validator` property can also be used to disable the in-built validator component used by the tree grid. For instance, by default, the tree grid uses two validator components, `DataAnnotationValidator` and an internal [ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_ValidationRules) property, for handling edit form validation. If you are willing to use only the `DataAnnotationValidator` component, then it could be simply achieved by using the `Validator` component inside [TreeGridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html). +The `Validator` property can also disable the built-in validator component used by the TreeGrid. By default, the TreeGrid uses two validator components—`DataAnnotationValidator` and the internal [ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_ValidationRules) property—to handle edit form validation. If only the `DataAnnotationValidator` is required, configure it by using the `Validator` component within [TreeGridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html). {% tabs %} @@ -511,13 +509,13 @@ namespace TreeGridComponent. Data ## Display validation message in dialog template -Use the form validation to display a validation message for a column that is not defined in the TreeGrid column. +Use form validation to display a validation message for a column that is not defined in the TreeGrid column set. -You can use the **Validator** property to apply validation rules to fields included in the dialog template, even if those fields are not displayed in the TreeGrid columns. +The `Validator` property can apply validation rules to fields included in the dialog template even if those fields are not displayed as TreeGrid columns. -In the below example, the **TaskName** field is not defined in the TreeGrid column and the validation message for the **TaskName** is displayed in the dialog template. +In the following example, the `TaskName` field is not defined in the TreeGrid columns, and the validation message for `TaskName` is displayed within the dialog template. -N> The validation message for fields that are not defined in the TreeGrid column will be shown as the validation summary (top of the dialog edit form) in the dialog edit form. +N> For fields not defined as TreeGrid columns, validation messages appear in the validation summary (at the top of the dialog edit form). ```cshtml @using Syncfusion.Blazor.TreeGrid; @@ -630,4 +628,5 @@ N> The validation message for fields that are not defined in the TreeGrid column ``` -![Display Validation in Blazor Tree Grid Dialog Template](../images/blazor-treegrid-display-validation-in-dialog-template.png) +The following image shows how validation messages can be displayed from a dialog template for fields not defined as columns. +![Display Validation in Blazor Tree Grid Dialog Template](../images/blazor-treegrid-display-validation-in-dialog-template.png) \ No newline at end of file diff --git a/blazor/treegrid/editing/command-column-editing.md b/blazor/treegrid/editing/command-column-editing.md index 9e4ed885b9..f09b299cec 100644 --- a/blazor/treegrid/editing/command-column-editing.md +++ b/blazor/treegrid/editing/command-column-editing.md @@ -1,15 +1,15 @@ --- layout: post -title: Command Column Editing in Blazor Tree Grid Component | Syncfusion -description: Checkout and learn here all about Command Column Editing in Syncfusion Blazor Tree Grid component and much more details. +title: Command Column Editing in Blazor TreeGrid Component | Syncfusion +description: Learn how to add and configure command columns in the Syncfusion Blazor TreeGrid to provide built-in CRUD buttons (Edit, Delete, Save, Cancel) and create custom command buttons with CommandClicked event handling. platform: Blazor -control: Tree Grid +control: TreeGrid documentation: ug --- -# Command Column Editing in Blazor Tree Grid Component +# Command Column Editing in Blazor TreeGrid Component -The command column provides an option to add CRUD action buttons in a column. This can be defined by the [TreeGridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Commands) property. +The command column provides built-in CRUD action buttons within a column. Configure it using the [TreeGridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Commands) property. The available built-in command buttons are: @@ -96,9 +96,9 @@ public class TreeData ## Custom command -The custom command buttons can be added in a column by using the [Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Commands) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component and the action for the custom buttons can be defined in the [CommandClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_CommandClicked) event. +Add custom command buttons using the [TreeGridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Commands) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component, and handle actions in the [CommandClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_CommandClicked) event. -The following sample code demonstrates adding custom command in the **Manage Records** column and the `CommandClicked` event which triggers when the command is clicked, +The following example adds a custom Details button in the **Manage Records** column and handles the action in the **CommandClicked** event. ```cshtml @using Syncfusion.Blazor.TreeGrid; @@ -160,5 +160,5 @@ The following sample code demonstrates adding custom command in the **Manage Rec } ``` -The following image represents the custom command added in the **Manage Records** column of the Tree Grid component, +The following image shows a custom command button in the **Manage Records** column of the TreeGrid. ![Blazor TreeGrid with Custom Command](../images/blazor-treegrid-custom-command.png) \ No newline at end of file From 24e28452001a583643119aa26394f4667989dca6 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Mon, 22 Sep 2025 17:36:04 +0530 Subject: [PATCH 2/7] 983239: updated --- blazor/treegrid/editing/cell-editing.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/blazor/treegrid/editing/cell-editing.md b/blazor/treegrid/editing/cell-editing.md index 3f9edb43ea..1e75d60c75 100644 --- a/blazor/treegrid/editing/cell-editing.md +++ b/blazor/treegrid/editing/cell-editing.md @@ -1,7 +1,7 @@ --- layout: post title: Cell Editing in Blazor TreeGrid Component | Syncfusion -description: Learn how to enable and use cell editing in the Syncfusion Blazor TreeGrid component, including configuring EditMode.Cell, committing or canceling edits, and related settings. +description: Checkout and learn here all about Cell Editing in Syncfusion Blazor Tree Grid component and much more details. platform: Blazor control: TreeGrid documentation: ug @@ -80,4 +80,5 @@ public class TreeData ![Cell Editing in Blazor TreeGrid](../images/blazor-treegrid-cell-edit.png) -N> The default edit mode is Row. To use Cell editing, set EditMode to Cell. \ No newline at end of file + +N> The default edit mode is Row. To use Cell editing, set EditMode to Cell. From 49b638ff4d9d8816a06cc5f12af5a5715530f32d Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Mon, 22 Sep 2025 17:36:55 +0530 Subject: [PATCH 3/7] 983239: updated --- blazor/treegrid/editing/column-validation.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/blazor/treegrid/editing/column-validation.md b/blazor/treegrid/editing/column-validation.md index db57148b5c..a33263dbe5 100644 --- a/blazor/treegrid/editing/column-validation.md +++ b/blazor/treegrid/editing/column-validation.md @@ -1,7 +1,7 @@ --- layout: post title: Column Validation in Blazor TreeGrid Component | Syncfusion -description: Learn how to configure column validation in the Syncfusion Blazor TreeGrid component using ValidationRules, data annotations, custom validator components, disabling the built-in validator, and displaying validation messages in dialog templates. +description: Checkout and learn here all about column validation in Syncfusion Blazor TreeGrid component and much more details. platform: Blazor control: TreeGrid documentation: ug @@ -629,4 +629,5 @@ N> For fields not defined as TreeGrid columns, validation messages appear in the ``` The following image shows how validation messages can be displayed from a dialog template for fields not defined as columns. -![Display Validation in Blazor Tree Grid Dialog Template](../images/blazor-treegrid-display-validation-in-dialog-template.png) \ No newline at end of file + +![Display Validation in Blazor Tree Grid Dialog Template](../images/blazor-treegrid-display-validation-in-dialog-template.png) From 8a8d0636e9b19d82bbae4c9c5c1f3d5e738c4639 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Mon, 22 Sep 2025 17:37:37 +0530 Subject: [PATCH 4/7] 983239: updated --- blazor/treegrid/editing/command-column-editing.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/blazor/treegrid/editing/command-column-editing.md b/blazor/treegrid/editing/command-column-editing.md index f09b299cec..5e396874ed 100644 --- a/blazor/treegrid/editing/command-column-editing.md +++ b/blazor/treegrid/editing/command-column-editing.md @@ -1,7 +1,7 @@ --- layout: post title: Command Column Editing in Blazor TreeGrid Component | Syncfusion -description: Learn how to add and configure command columns in the Syncfusion Blazor TreeGrid to provide built-in CRUD buttons (Edit, Delete, Save, Cancel) and create custom command buttons with CommandClicked event handling. +description: Checkout and learn here all about Command Column Editing in Syncfusion Blazor Tree Grid component and much more details. platform: Blazor control: TreeGrid documentation: ug @@ -161,4 +161,5 @@ The following example adds a custom Details button in the **Manage Records** col ``` The following image shows a custom command button in the **Manage Records** column of the TreeGrid. -![Blazor TreeGrid with Custom Command](../images/blazor-treegrid-custom-command.png) \ No newline at end of file + +![Blazor TreeGrid with Custom Command](../images/blazor-treegrid-custom-command.png) From 54c460bae7db5b003249f33d1c1857a04e50677e Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Tue, 23 Sep 2025 10:01:06 +0530 Subject: [PATCH 5/7] 983239: updated --- blazor/treegrid/editing/column-validation.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blazor/treegrid/editing/column-validation.md b/blazor/treegrid/editing/column-validation.md index a33263dbe5..47779d7955 100644 --- a/blazor/treegrid/editing/column-validation.md +++ b/blazor/treegrid/editing/column-validation.md @@ -11,7 +11,7 @@ documentation: ug Column validation validates edited or added row data and displays errors for invalid fields before saving. TreeGrid uses the **Form Validator** component for column validation. Define validation rules using the [TreeGridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~ValidationRules.html) property. -N> Prerequisites: enable editing in [TreeGridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html) as needed (AllowEditing/AllowAdding/AllowDeleting), and define a primary key column (IsPrimaryKey) to support CRUD operations. +N> Prerequisites: To enable CRUD operations in TreeGrid, configure the [TreeGridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html) with AllowEditing, AllowAdding, and AllowDeleting as needed. Also, define a column with IsPrimaryKey set to true. ```cshtml @using TreeGridComponent.Data; @@ -631,3 +631,4 @@ N> For fields not defined as TreeGrid columns, validation messages appear in the The following image shows how validation messages can be displayed from a dialog template for fields not defined as columns. ![Display Validation in Blazor Tree Grid Dialog Template](../images/blazor-treegrid-display-validation-in-dialog-template.png) + From f92be3bb0e03295daadf10249f057a23eb1020bd Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Tue, 23 Sep 2025 10:02:02 +0530 Subject: [PATCH 6/7] 983239: updated --- blazor/treegrid/editing/command-column-editing.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blazor/treegrid/editing/command-column-editing.md b/blazor/treegrid/editing/command-column-editing.md index 5e396874ed..a74acb58fd 100644 --- a/blazor/treegrid/editing/command-column-editing.md +++ b/blazor/treegrid/editing/command-column-editing.md @@ -1,7 +1,7 @@ --- layout: post title: Command Column Editing in Blazor TreeGrid Component | Syncfusion -description: Checkout and learn here all about Command Column Editing in Syncfusion Blazor Tree Grid component and much more details. +description: Checkout and learn here all about Command Column Editing in Syncfusion Blazor TreeGrid component and much more details. platform: Blazor control: TreeGrid documentation: ug @@ -163,3 +163,4 @@ The following example adds a custom Details button in the **Manage Records** col The following image shows a custom command button in the **Manage Records** column of the TreeGrid. ![Blazor TreeGrid with Custom Command](../images/blazor-treegrid-custom-command.png) + From a10b41f3aaf75042db0d7fbda8a52f04437c5e20 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Tue, 23 Sep 2025 10:03:26 +0530 Subject: [PATCH 7/7] 983239: updated --- blazor/treegrid/editing/cell-editing.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blazor/treegrid/editing/cell-editing.md b/blazor/treegrid/editing/cell-editing.md index 1e75d60c75..f4bf9955f8 100644 --- a/blazor/treegrid/editing/cell-editing.md +++ b/blazor/treegrid/editing/cell-editing.md @@ -1,7 +1,7 @@ --- layout: post title: Cell Editing in Blazor TreeGrid Component | Syncfusion -description: Checkout and learn here all about Cell Editing in Syncfusion Blazor Tree Grid component and much more details. +description: Checkout and learn here all about Cell Editing in Syncfusion Blazor TreeGrid component and much more details. platform: Blazor control: TreeGrid documentation: ug @@ -82,3 +82,4 @@ public class TreeData N> The default edit mode is Row. To use Cell editing, set EditMode to Cell. +