Skip to content

Commit 846e1a6

Browse files
thavasianandthavasianand
authored
Merge pull request #6655 from syncfusion-content/983239-Editing1
983239: Editing file updated
2 parents aea98e4 + a10b41f commit 846e1a6

File tree

3 files changed

+45
-39
lines changed

3 files changed

+45
-39
lines changed

‎blazor/treegrid/editing/cell-editing.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
---
22
layout: post
3-
title: Cell Editing in Blazor Tree Grid Component | Syncfusion
4-
description: Checkout and learn here all about Cell Editing in Syncfusion Blazor Tree Grid component and much more details.
3+
title: Cell Editing in Blazor TreeGrid Component | Syncfusion
4+
description: Checkout and learn here all about Cell Editing in Syncfusion Blazor TreeGrid component and much more details.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Cell Editing in Blazor Tree Grid Component
10+
# Cell Editing in Blazor TreeGrid Component
11+
12+
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.
1113

12-
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**.
1314

1415
{% tabs %}
1516

@@ -79,4 +80,6 @@ public class TreeData
7980

8081
![Cell Editing in Blazor TreeGrid](../images/blazor-treegrid-cell-edit.png)
8182

82-
N> Cell edit mode is default mode of editing.
83+
84+
N> The default edit mode is Row. To use Cell editing, set EditMode to Cell.
85+

‎blazor/treegrid/editing/column-validation.md‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ layout: post
33
title: Column Validation in Blazor TreeGrid Component | Syncfusion
44
description: Checkout and learn here all about column validation in Syncfusion Blazor TreeGrid component and much more details.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

1010
# Column validation in Blazor TreeGrid Component
1111

12-
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).
12+
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.
13+
14+
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.
1315

1416
```cshtml
1517
@using TreeGridComponent.Data;
@@ -85,15 +87,14 @@ Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
8587
}
8688
```
8789

90+
The following image shows column validation errors displayed for the Progress field.
8891
![Column Validation in Blazor TreeGrid](../images/blazor-treegrid-column-validation.png)
8992

9093
## Custom validation
9194

92-
Custom validation allows the users to customize the validations manually according to the user's criteria.
93-
94-
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.
95+
Custom validation enables implementing validations based on application-specific rules.
9596

96-
The following sample code demonstrates custom validations implemented in the fields `Duration` and `Priority` .
97+
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.
9798

9899
```cshtml
99100
@using TreeGridComponent. Data;
@@ -206,16 +207,15 @@ namespace TreeGridComponent. Data
206207

207208
## Custom validator component
208209

209-
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).
210+
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).
210211

211212
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).
212213

213-
In the below code example, the following things have been done.
214-
215-
* Created a form validator component named `MyCustomValidator` which accepts [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html) value as parameter.
216-
* Used the `MyCustomValidator` component inside the `Validator` property.
217-
* This validator component will check whether Duration value is in between 0 to 30.
218-
* Displayed the validation error messages using `ValidationMessage` component.
214+
In the following example:
215+
- A custom form validator component named `MyCustomValidator` accepts a [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html) parameter.
216+
- The `MyCustomValidator` component is used inside the `Validator` property.
217+
- The validator checks whether the Duration value is between 0 and 30.
218+
- Validation errors are displayed using the `ValidationMessage` component.
219219

220220
{% tabs %}
221221

@@ -381,15 +381,14 @@ namespace TreeGridComponent. Data
381381

382382
{% endtabs %}
383383

384-
The output will be as follows.
385-
384+
The following image shows a TreeGrid using a custom validator component in a dialog edit form.
386385
![Blazor TreeGrid with Custom Validator](../images/blazor-treegrid-custom-validator.png)
387386

388387
## Display validation message using in-built tooltip
389388

390-
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.
389+
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.
391390

392-
Now, HandleValidation method of the MyCustomValidator component would be changed like below.
391+
The following snippet shows the updated `HandleValidation` method of the `MyCustomValidator` component to display tooltip messages.
393392

394393
{% tabs %}
395394

@@ -426,13 +425,12 @@ protected void HandleValidation(FieldIdentifier identifier)
426425

427426
{% endtabs %}
428427

429-
The output will be as follows.
430-
428+
The following image shows tooltip-based validation messages for a TreeGrid field.
431429
![Blazor TreeGrid with Custom Validator](../images/blazor-treegrid-with-custom-validator.png)
432430

433431
## Disable in-built validator component
434432

435-
`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).
433+
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).
436434

437435
{% tabs %}
438436

@@ -511,13 +509,13 @@ namespace TreeGridComponent. Data
511509

512510
## Display validation message in dialog template
513511

514-
Use the form validation to display a validation message for a column that is not defined in the TreeGrid column.
512+
Use form validation to display a validation message for a column that is not defined in the TreeGrid column set.
515513

516-
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.
514+
The `Validator` property can apply validation rules to fields included in the dialog template even if those fields are not displayed as TreeGrid columns.
517515

518-
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.
516+
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.
519517

520-
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.
518+
N> For fields not defined as TreeGrid columns, validation messages appear in the validation summary (at the top of the dialog edit form).
521519

522520
```cshtml
523521
@using Syncfusion.Blazor.TreeGrid;
@@ -630,4 +628,7 @@ N> The validation message for fields that are not defined in the TreeGrid column
630628
631629
```
632630

631+
The following image shows how validation messages can be displayed from a dialog template for fields not defined as columns.
632+
633633
![Display Validation in Blazor Tree Grid Dialog Template](../images/blazor-treegrid-display-validation-in-dialog-template.png)
634+

‎blazor/treegrid/editing/command-column-editing.md‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Command Column Editing in Blazor Tree Grid Component | Syncfusion
4-
description: Checkout and learn here all about Command Column Editing in Syncfusion Blazor Tree Grid component and much more details.
3+
title: Command Column Editing in Blazor TreeGrid Component | Syncfusion
4+
description: Checkout and learn here all about Command Column Editing in Syncfusion Blazor TreeGrid component and much more details.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Command Column Editing in Blazor Tree Grid Component
10+
# Command Column Editing in Blazor TreeGrid Component
1111

12-
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.
12+
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.
1313

1414
The available built-in command buttons are:
1515

@@ -96,9 +96,9 @@ public class TreeData
9696

9797
## Custom command
9898

99-
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.
99+
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.
100100

101-
The following sample code demonstrates adding custom command in the **Manage Records** column and the `CommandClicked` event which triggers when the command is clicked,
101+
The following example adds a custom Details button in the **Manage Records** column and handles the action in the **CommandClicked** event.
102102

103103
```cshtml
104104
@using Syncfusion.Blazor.TreeGrid;
@@ -160,5 +160,7 @@ The following sample code demonstrates adding custom command in the **Manage Rec
160160
}
161161
```
162162

163-
The following image represents the custom command added in the **Manage Records** column of the Tree Grid component,
164-
![Blazor TreeGrid with Custom Command](../images/blazor-treegrid-custom-command.png)
163+
The following image shows a custom command button in the **Manage Records** column of the TreeGrid.
164+
165+
![Blazor TreeGrid with Custom Command](../images/blazor-treegrid-custom-command.png)
166+

0 commit comments

Comments
 (0)