Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 68 additions & 46 deletions blazor/datagrid/batch-editing.md

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions blazor/datagrid/column-validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,9 @@ Data annotation validation attributes are used to validate fields in the Syncfus

## Custom validation

Custom validation enables the definition of validation logic tailored to specific application requirements.
Custom validation rules apply specific rules to grid columns beyond standard built-in validation.

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.
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.

Expand Down Expand Up @@ -441,7 +441,7 @@ protected void HandleValidation(FieldIdentifier identifier)

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<sup style="font-size:70%">&reg;</sup> Blazor DataGrid.

By default, the Grid uses two validator components:
By default, the DataGrid uses two validator components:

- 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
Expand Down Expand Up @@ -480,7 +480,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports fo

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.

> Validation messages for fields not defined in the Grid columns will appear as a validation summary at the top of the dialog edit form.
> Validation messages for fields not defined in the DataGrid columns will appear as a validation summary at the top of the dialog edit form.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand Down
9 changes: 5 additions & 4 deletions blazor/datagrid/command-column-editing.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ documentation: ug

# Command column editing in Blazor DataGrid

The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports command column editing, which enables CRUD (Create, Read, Update, Delete) action buttons within a column to perform operations on individual rows. This approach is suitable for inline editing, deletion, or saving changes directly within the Grid.
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports command column editing, which enables CRUD (Create, Read, Update, and Delete) action buttons within a column to perform operations on individual rows. This approach is suitable for inline editing, deletion, or saving changes directly within the DataGrid.

To enable command column editing, configure the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. This property defines which command buttons **Edit**, **Delete**, **Save**, and **Cancel** should appear in the command column.
## Enable command column editing

To enable command column editing, configure the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. This property defines which command buttons **Edit**, **Delete**, **Save**, and **Cancel** should appear in the command column.

| Command Button | Action |
|---------------|-----------------------------|
Expand All @@ -21,7 +22,7 @@ To enable command column editing, configure the [GridColumn.Commands](https://he
| Save | Update the edited row. |
| Cancel | Cancel the edit operation. |

In this configuration, the [GridCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridCommandColumns.html) property is used to display all four command buttons in the Manage Records column.
In this configuration, the [GridCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridCommandColumns.html) property is used to display all four command buttons in the Manage Records column.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand Down Expand Up @@ -98,7 +99,7 @@ public class OrderDetails

## Custom command column

The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding custom command buttons in a column to perform specific actions on individual rows. This feature is suitable for implementing customized functionality such as editing, deleting, or executing other operations.
The custom command column feature extends the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid capabilities by enabling custom command buttons in a column to perform specific actions on individual rows. This is particularly powerful when specialized functionality for editing, deletion, or custom operations is required beyond the built-in command set.

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.

Expand Down
10 changes: 6 additions & 4 deletions blazor/datagrid/dialog-editing.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Dialog editing in Blazor DataGrid

Dialog editing in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables editing of data in the selected row using a dialog window. This feature facilitates quick modification of cell values and updates the data source without navigating to a separate page or view. Dialog editing is particularly effective for scenarios requiring streamlined editing of multiple cells.
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid dialog editing provides a powerful, efficient way to edit row data through a dedicated modal dialog window that focuses attention on the editing form. Instead of editing cells directly in the DataGrid, multiple field values can be entered and modified at once in a clean, organized form. The DataGrid automatically saves all changes to the data source without navigating away from the current page making data entry faster, more intuitive, and less error-prone, especially when dealing with complex records that span multiple columns.

To enable dialog editing, set the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Dialog**. This property defines the editing mode for the DataGrid.

Expand Down Expand Up @@ -128,7 +128,7 @@ To customize the edit dialog, use the [HeaderTemplate](https://help.syncfusion.c
}
public async Task SaveEdit()
{
await Grid.EndEditAsync(); //Save the edited/added data to Grid.
await Grid.EndEditAsync(); //Save the edited/added data to DataGrid.
}
}
{% endhighlight %}
Expand Down Expand Up @@ -181,7 +181,7 @@ public class OrderDetails
## Show or hide columns in dialog editing

The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the ability to dynamically show or hide columns during dialog editing. This feature enables conditional column visibility based on the editing context, such as when adding a new record or modifying an existing one.
To implement this behavior, use the following Grid events:
To implement this behavior, use the following DataGrid events:

1. [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating): Triggered before a new record is added.
2. [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing): Triggered before an existing record is edited.
Expand All @@ -192,6 +192,8 @@ Within the `RowCreating` and `RowEditing` event handlers, column visibility can

To restore the original visibility state, use the `Column.Visible` property in the `RowUpdating` and `EditCanceling` events.

In the following example, the “Customer ID” column is rendered as a hidden column, and the “Ship Country” column is rendered as a visible column. In the edit mode, the “Customer ID” column will be changed to a visible state and the “Ship Country” column will be changed to a hidden state.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
Expand Down Expand Up @@ -636,7 +638,7 @@ public class OrderDetails

The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports automatic column value updates based on changes made to related columns during dialog editing. This functionality enables dynamic calculations within the edit form using the **Dialog Template** feature.

In the following example, the [SfNumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) component is rendered inside the dialog edit form. The **Total** column value is calculated based on the **Price** and **Quantity** columns using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxEvents-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxEvents_1_ValueChange) event.
In the following example, the [SfNumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) is rendered inside the dialog edit form. The **Total** column value is calculated based on the **Price** and **Quantity** columns using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxEvents-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxEvents_1_ValueChange) event.

This behavior is configured using the [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating), [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating), and [RowEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEdited) events, along with the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html).

Expand Down
Loading