983239: Editing file updated

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: Checkout and learn here all about Cell Editing in Syncfusion Blazor TreeGrid component and much more details.
 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,6 @@ public class TreeData
 
 ![Cell Editing in Blazor TreeGrid](../images/blazor-treegrid-cell-edit.png)
 
-N> Cell edit mode is default mode of editing.
+
+N> The default edit mode is Row. To use Cell editing, set EditMode to Cell.
+

blazor/treegrid/editing/column-validation.md

@@ -3,13 +3,15 @@ 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.
 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: 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; 
@@ -85,15 +87,14 @@ Toolbar="@(new List<string>() { "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,7 @@ N> The validation message for fields that are not defined in the TreeGrid column
 
 ```
 
+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)
+

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: Checkout and learn here all about Command Column Editing in Syncfusion Blazor TreeGrid component and much more details.
 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,7 @@ 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,
-![Blazor TreeGrid with Custom Command](../images/blazor-treegrid-custom-command.png)
+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)
+