From b1eb64c81496bd50766b61cb524b38199e9e1872 Mon Sep 17 00:00:00 2001 From: Nithya Date: Tue, 20 May 2025 14:27:24 +0530 Subject: [PATCH] 957745: Content checking for below md * Batch Editing * In-line Editing * Command column eidting * Column Validation * Dialog Editing --- blazor/datagrid/batch-editing.md | 111 +++++++++++--------- blazor/datagrid/column-validation.md | 58 +++++------ blazor/datagrid/command-column-editing.md | 32 +++--- blazor/datagrid/dialog-editing.md | 63 ++++++----- blazor/datagrid/in-line-editing.md | 121 +++++++++++----------- 5 files changed, 199 insertions(+), 186 deletions(-) diff --git a/blazor/datagrid/batch-editing.md b/blazor/datagrid/batch-editing.md index ae1d0650c8..9a3b0935e6 100644 --- a/blazor/datagrid/batch-editing.md +++ b/blazor/datagrid/batch-editing.md @@ -1,21 +1,21 @@ --- layout: post -title: Batch Editing in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Batch Editing in Syncfusion Blazor DataGrid component and much more details. +title: Batch Editing in Blazor DataGrid | Syncfusion +description: Checkout and learn here all about Batch Editing in Syncfusion Blazor DataGrid and much more details. platform: Blazor control: DataGrid documentation: ug --- -# Batch editing in Blazor DataGrid component +# Batch editing in Blazor DataGrid -Batch editing is a powerful feature in the Grid component that allows you to edit multiple cells simultaneously. It provides a convenient way to make changes to multiple cells and save them in a single request to the data source. This feature is particularly useful when dealing with large datasets or when you need to update multiple cells at once. +Batch editing is a powerful feature in the Syncfusion Blazor DataGrid that allows you to edit multiple cells simultaneously. It provides a convenient way to make changes to several cells and save them in a single request to the data source. This feature is particularly useful when working with large datasets or when you need to update multiple cells at once. -In batch edit mode, when you double-click on a grid cell, the target cell changes to an editable state. You can perform bulk update of the added, changed, and deleted data by either clicking on the toolbar's **Update** button or by externally invoking the [ApplyBatchChangesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ApplyBatchChangesAsync_Syncfusion_Blazor_Grids_BatchChanges__0__) method. +In batch edit mode, when you double-click a Grid cell, the target cell becomes editable. You can perform bulk updates of added, changed, and deleted data by either clicking the toolbar's **Update** button or by externally invoking the [ApplyBatchChangesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ApplyBatchChangesAsync_Syncfusion_Blazor_Grids_BatchChanges__0__) method. -To enable batch editing mode, you need to set the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Batch**. This property determines the editing mode of the Grid and allows you to activate the batch editing feature. +To enable batch editing mode, set the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Batch**. This property determines the editing mode of the Grid and allows you to activate the batch editing feature. -Here's an example how to enable batch editing in the blazor grid component: +Here's an example of how to enable batch editing in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -84,13 +84,13 @@ public class OrderDetails ## Automatically update the column based on another column edited value -You can automatically update the value of a column based on the edited value of another column in batch mode. This feature is useful when you want to dynamically calculate and update a column's value in real-time based on the changes made in another related column. +You can automatically update the value of a column based on the edited value of another column in batch mode. This feature is useful when you want to dynamically calculate and update a column's value in real time based on changes made in another related column. -To implement this feature, you can define a calculative column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. By leveraging events and methods such as [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSaved) and [UpdateCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateCellAsync_System_Int32_System_String_System_Object_), you can efficiently update the column value whenever another column's value is edited. +To implement this feature, define a calculated column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. By leveraging events and methods such as [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSaved) and [UpdateCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateCellAsync_System_Int32_System_String_System_Object_), you can efficiently update the column value whenever another column's value is edited. -Additionally, for batch editing, the add operation can be managed using a boolean variable with the [OnBatchAdd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchAdd) and [OnBatchSave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchSave) events. These events ensure that calculations and updates are applied even when new rows are added during batch editing. +Additionally, for batch editing, you can manage the add operation using a boolean variable along with the [OnBatchAdd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchAdd) and [OnBatchSave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchSave) events. These events ensure that calculations and updates are applied even when new rows are added during batch editing. -In the following example, the **TotalCost** column value is updated based on changes to the **UnitPrice** and **UnitInStock** columns during batch editing. +In the following example, the **TotalCost** column value is updated based on changes to the **UnitPrice** and **UnitsInStock** columns during batch editing. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -197,15 +197,15 @@ public class ProductDetails ## Cancel edit based on condition -The Grid component provides to cancel the CRUD operations (Edit, Add, Delete) for particular row or cell in batch edit mode based on specific conditions. This feature allows you to control over whether editing should be allowed or prevented for certain rows or cells in the grid. +The Syncfusion Blazor DataGrid allows you to cancel CRUD operations (Edit, Add, and Delete) for specific rows or cells in batch edit mode based on custom conditions. This feature gives you control over whether editing should be permitted or prevented for certain rows or cells in the Grid. -To cancel the edit action, you need to handle the [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) event. This event is triggered when a cell enters the edit mode. Within the event handler, you can add a condition to check whether the edit operation should be allowed or canceled. If the condition is met, set the `args.Cancel` property to **true** to cancel the edit operation. +To cancel the edit action, handle the [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) event. This event is triggered when a cell enters edit mode. In the event handler, add a condition to determine if the edit operation should be allowed. If the condition is met, set the `args.Cancel` property to **true** to cancel the edit operation. -To cancel the add action, you need to handle the [OnBatchAdd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchAdd) event. This event is triggered before a new record is added to the batch changes. Within the event handler, you can add a condition to determine whether the add operation should proceed or be canceled. If the condition is met, set the `args.Cancel` property to **true** to cancel the add operation. +To cancel the add action, handle the [OnBatchAdd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchAdd) event. This event is triggered before a new record is added to the batch changes. In the event handler, add a condition to determine if the add operation should proceed. If the condition is met, set the `args.Cancel` property to **true** to cancel the add operation. -To cancel the delete action, you need to handle the [OnBatchDelete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchDelete) event. This event is triggered before a record is deleted from the batch changes. Within the event handler, you can add a condition to control whether the delete operation should take place or be canceled. If the condition is met, set the `args.Cancel` property to **true** to cancel the delete operation. +To cancel the delete action, handle the [OnBatchDelete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchDelete) event. This event is triggered before a record is deleted from the batch changes. In the event handler, add a condition to control whether the delete operation should take place. If the condition is met, set the `args.Cancel` property to **true** to cancel the delete operation. -In the below demo, prevent the CRUD operation based on the **Role** column value. If the Role Column is **Admin**, then edit/delete action is prevented for that row. +In the example below, CRUD operations are prevented based on the **Role** column value. If the Role column is **Admin**, edit and delete actions are prevented for that row. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -302,17 +302,17 @@ public class EmployeeDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/hjBytMVNBCJUWjzh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Adding a new row at the bottom of the grid +## Adding a new row at the bottom of the Grid -The grid component allows you to add a new row at the bottom of the grid, allowing you to insert a new record at the end of the existing data set. This feature is particularly useful when you want to conveniently add new records without the need to scroll up or manually reposition the newly added row. To achieve this, you can make use of the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property in the `GridEditSettings` configuration and set it to **Bottom**. +The Syncfusion Blazor DataGrid allows you to add a new row at the bottom of the Grid, enabling you to insert a new record at the end of the existing data set. This feature is particularly useful when you want to conveniently add new records without scrolling up or manually repositioning the newly added row. To achieve this, use the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property in the `GridEditSettings` configuration and set it to **Bottom**. ->* If you set `NewRowPosition` as **Bottom**, you can use the **TAB** key to easily move between cells or rows in edit mode. As you enter data in each cell and press **TAB**, the grid will automatically create new rows below the current row, allowing you to conveniently add data for multiple rows without having to leave the edit mode. ->* If you set `NewRowPosition` as **Top**, the grid will display a blank row form at the top by default, allowing you to enter data for the new record. However, when the data is saved or updated, it will be inserted at the bottom of the grid ,ensuring the new record appears at the end of the existing data set. ->* If the paging feature is enabled, updating the row will automatically move it to the last page based on the page size.This behavior applies to both local and remote data binding. ->* If scrolling is enabled, you can use the **TAB** key to add a new row, even if the new row is added beyond the currently visible area of the grid. ->* Add `NewRowPosition` is supported for **Normal** and **Batch** editing modes. +>* If you set `NewRowPosition` to **Bottom**, you can use the **TAB** key to easily move between cells or rows in edit mode. As you enter data in each cell and press **TAB**, the Grid will automatically create new rows below the current row, allowing you to conveniently add data for multiple rows without leaving edit mode. +>* If you set `NewRowPosition` to **Top**, the Grid will display a blank row form at the top by default, allowing you to enter data for the new record. However, when the data is saved or updated, it will be inserted at the bottom of the Grid, ensuring the new record appears at the end of the existing data set. +>* If the paging feature is enabled, updating the row will automatically move it to the last page based on the page size. This behavior applies to both local and remote data binding. +>* If scrolling is enabled, you can use the **TAB** key to add a new row, even if the new row is added beyond the currently visible area of the Grid. +>* The `NewRowPosition` property is supported for both **Normal** and **Batch** editing modes. -Here's an example that demonstrates how to enable adding new rows at the bottom of the grid using `NewRowPosition` property: +Here's an example that demonstrates how to enable adding new rows at the bottom of the Grid using the `NewRowPosition` property: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -406,15 +406,15 @@ public class OrderDetails ## Confirmation dialog -Displaying a confirmation dialog provides an additional layer of confirmation when performing actions like saving a record or canceling changes in the grid. This dialog prompts for confirmation before proceeding with the action, ensuring that accidental or undesired changes are avoided. The grid component offers a built-in confirmation dialog that can be used to confirm save, cancel, and other actions. +Displaying a confirmation dialog provides an extra layer of safety when performing actions such as saving a record or canceling changes in the Syncfusion Blazor DataGrid. This dialog prompts users for confirmation before proceeding, helping to prevent accidental or undesired changes. The Grid includes a built-in confirmation dialog that can be used to confirm save, cancel, and other actions. -To enable the confirmation dialog, you can set the [ShowConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowConfirmDialog) property of the `GridEditSettings` configuration to **true**. The default value is **true**. +To enable the confirmation dialog, set the [ShowConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowConfirmDialog) property of the `GridEditSettings` configuration to **true**. The default value is **true**. > * `GridEditSettings.ShowConfirmDialog` requires the [`GridEditSettings.Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) to be **Batch**. -> * If `GridEditSettings.ShowConfirmDialog` set to **false**, then confirmation dialog does not display in batch editing. -> * While performing both update and delete operations, a separate delete confirmation dialog is shown at the time of clicking the delete button or pressing the delete key itself. +> * If `GridEditSettings.ShowConfirmDialog` is set to **false**, the confirmation dialog will not appear in batch editing. +> * When performing update or delete operations, a separate delete confirmation dialog is shown when clicking the delete button or pressing the delete key. -Here's an example that demonstrates how to enable/disable the confirmation dialog using the `ShowConfirmDialog` property: +The following example demonstrates how to enable or disable the confirmation dialog using the `ShowConfirmDialog` property: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -504,13 +504,13 @@ public class OrderDetails ## How to make editing in single click and arrow keys -You can enable editing in a single click and navigate between cells or rows using arrow keys without having to double-click or use the mouse for navigation. By default, in batch mode, the **TAB** key can be used to edit or move to the next cell or row and the **Enter** key is used to move to the next row cell. However, you can customize this behavior to enable editing with a single click or using arrow keys. +You can enable editing with a single click and navigate between cells or rows using arrow keys, without needing to double-click or use the mouse for navigation. By default, in batch mode, the **TAB** key allows you to move to the next cell or row, and the **Enter** key moves to the next cell in the row. However, you can customize this behavior to start editing with a single click or by using arrow keys. -To enable editing in a single click, you can handle the [CellSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSelected) event of the Grid. Within the event handler, call the [EditCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EditCellAsync_System_Int32_System_String_) method to make the clicked cell editable. +To enable editing with a single click, handle the [CellSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSelected) event of the Grid. In the event handler, call the [EditCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EditCellAsync_System_Int32_System_String_) method to make the selected cell editable. > Ensure that the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property of [GridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html) is set to **Both**. -Here's an example that demonstrates how to achieve both single-click editing and arrow key navigation using the `CellSelected` event in conjunction with the `EditCellAsync` method: +The following example demonstrates how to enable single-click editing and arrow key navigation using the `CellSelected` event together with the `EditCellAsync` method: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -596,9 +596,9 @@ public class OrderDetails ## Disable editing for a particular cell -You can prevent editing of specific cells based on certain conditions in the Grid component. This feature is useful when you want to restrict editing for certain cells, such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the grid. +You can prevent editing of specific cells based on certain conditions in the Syncfusion Blazor DataGrid. This feature is useful when you want to restrict editing for certain cells, such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the Grid. -To disable editing for a particular cell in batch mode, use the [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) event of the grid. You can then use the **args.Cancel** property and set it to **true** to prevent editing for that cell. +To disable editing for a particular cell in batch mode, use the [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) event of the Grid. In the event handler, set the **args.Cancel** property to **true** to prevent editing for that cell. Here's an example demonstrating how you can disable editing for cells containing the value **France** using the `OnCellEdit` event: @@ -676,13 +676,13 @@ public class OrderDetails ## Save or update the changes immediately -The Grid component provides a convenient way to save or update changes immediately in batch mode without the need for a separate Save button. This feature is particularly useful when you want to allow you to edit data efficiently without having to manually trigger a save action. You can achieve this by utilizing the [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSaved) event and the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method. +The Syncfusion Blazor DataGrid provides a convenient way to save or update changes immediately in batch mode without the need for a separate Save button. This feature is particularly useful when you want to allow you to edit data efficiently without having to manually trigger a save action. You can achieve this by utilizing the [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSaved) event and the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method. -By default, when you use the `EndEditAsync` method to save or update data, a confirmation dialog is displayed. This dialog prompts for confirmation before proceeding with the save or cancel action, ensuring that accidental or undesired changes are avoided. +By default, when you use the `EndEditAsync` method to save or update data, a confirmation dialog is displayed. This dialog prompts for confirmation before proceeding with the save or cancel action, helping to prevent accidental or undesired changes. The `CellSaved` event is triggered when a cell is saved in the Grid. It provides a way to perform custom logic when a cell is saved or updated. -> * To avoid the confirmation dialog when using the `EndEditAsync` method, you can set [GridEditSettings.ShowConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowConfirmDialog) to **false**. However, please note that to use this property, the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) must be set to **Batch**. This combination of properties allows you to save or update changes immediately without the need for a confirmation dialog. +> * To avoid the confirmation dialog when using the `EndEditAsync` method, you can set [GridEditSettings.ShowConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowConfirmDialog) to **false**. However, note that to use this property, the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) must be set to **Batch**. This combination allows you to save or update changes immediately without the need for a confirmation dialog. Here's an example that demonstrates how to achieve immediate saving or updating of changes using the `CellSaved` event and the `EndEditAsync` method: @@ -758,15 +758,16 @@ public class OrderDetails ## Edit next row or previous row from the current row -In batch mode, you can seamlessly edit the next or previous row directly from the current row by enabling the [GridEditSettings.AllowNextRowEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowNextRowEdit) property and setting it to **true**. This feature enhances individual experience by streamlining row-to-row editing in an efficient and intuitive manner. +In batch mode, you can seamlessly edit the next or previous row directly from the current row by enabling the [GridEditSettings.AllowNextRowEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowNextRowEdit) property and setting it to **true**. This feature enhances the user experience by streamlining row-to-row editing in an efficient and intuitive manner. * **Navigate to the Next Row**: Press the `TAB` key from the last cell of the current row to move to and begin editing the first cell of the next row. * **Navigate to the Previous Row**: Press `SHIFT + TAB` from the first cell of the current row to move to and begin editing the last cell of the previous row. -Here's an example that demonstrates how to enable/disable the `GridEditSettings.AllowNextRowEdit` property: +The following example demonstrates how to enable or disable the `GridEditSettings.AllowNextRowEdit` property: {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @@ -799,7 +800,9 @@ Here's an example that demonstrates how to enable/disable the `GridEditSettings. } } {% endhighlight %} + {% highlight c# tabtitle="OrderDetails.cs" %} + public class OrderDetails { public static List Order = new List(); @@ -839,6 +842,7 @@ public class OrderDetails public string ShipCountry { get; set; } public DateTime OrderDate { get; set; } } + {% endhighlight %} {% endtabs %} @@ -846,23 +850,24 @@ public class OrderDetails ## Provide new item or edited item using events -Grid uses `Activator.CreateInstance()` to create or clone new record instance during add and edit operations, so it must have parameterless constructors defined for the model class and any referenced complex type classes. +The Syncfusion Blazor DataGrid uses `Activator.CreateInstance()` to create or clone new record instances during add and edit operations. Therefore, the model class and any referenced complex type classes must have parameterless constructors defined. -There are cases where custom logic is required for creating new object or new object instance cannot be created using `Activator.CreateInstance()`. In such cases, you can provide model object instance manually using events. +However, there are scenarios where custom logic is required to create a new object, or a new object instance cannot be created using `Activator.CreateInstance()`. In such cases, you can manually provide the model object instance using events. -You can use the [OnBatchAdd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchAdd) and [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) events to provide new object instance during add and cell edit operations respectively. +You can use the [OnBatchAdd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchAdd) and [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) events to provide a new object instance during add and cell edit operations, respectively. -For add operation, assign new object to the [OnBatchAdd.DefaultData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.BeforeBatchAddArgs-1.html#Syncfusion_Blazor_Grids_BeforeBatchAddArgs_1_DefaultData) property. For cell edit, assign cloned object in the [OnCellEdit.Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CellEditArgs-1.html#Syncfusion_Blazor_Grids_CellEditArgs_1_Data) property. +For the add operation, assign the new object to the [OnBatchAdd.DefaultData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.BeforeBatchAddArgs-1.html#Syncfusion_Blazor_Grids_BeforeBatchAddArgs_1_DefaultData) property. For cell editing, assign the cloned object to the [OnCellEdit.Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CellEditArgs-1.html#Syncfusion_Blazor_Grids_CellEditArgs_1_Data) property. In the following example: -* A model class with no parameter-less constructor is bound with grid. -* Enabled batch editing feature in grid. -* `OnBatchAdd` event callback is assigned in which `DefaultData` property is assigned with custom object for add operation. -* `OnCellEdit` event callback is assigned in which the `Data` property is assigned with a custom object for handling edit operation. +* A model class without a parameterless constructor is bound to the Grid. +* Batch editing is enabled in the Grid. +* The `OnBatchAdd` event callback assigns a custom object to the `DefaultData` property for the add operation. +* The `OnCellEdit` event callback assigns a custom object to the `Data` property for the edit operation. {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids @@ -894,8 +899,11 @@ In the following example: args.Data = args.Data ?? new OrderDetails(args.RowData.OrderID, args.RowData.CustomerID, args.RowData.Freight, args.RowData.ShipCountry, args.RowData.OrderDate); } } + {% endhighlight %} + {% highlight c# tabtitle="OrderDetails.cs" %} + public class OrderDetails { public static List Order = new List(); @@ -935,6 +943,7 @@ public class OrderDetails public string ShipCountry { get; set; } public DateTime OrderDate { get; set; } } + {% endhighlight %} {% endtabs %} @@ -942,12 +951,13 @@ public class OrderDetails ## How to perform bulk changes using a method -To perform bulk changes, including adding, editing, and deleting records, you can utilize the [ApplyBatchChangesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ApplyBatchChangesAsync_Syncfusion_Blazor_Grids_BatchChanges__0__) method. This method streamlines the process of updating new, edited, and deleted records within the current page of the Grid. It is primarily designed to efficiently apply bulk changes all at once. +To perform bulk changes—including adding, editing, and deleting records—you can use the [ApplyBatchChangesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ApplyBatchChangesAsync_Syncfusion_Blazor_Grids_BatchChanges__0__) method. This method streamlines the process of updating new, edited, and deleted records within the current page of the Grid, allowing you to efficiently apply all changes at once. -When you make edits or add new records, these changes will be visually highlighted with green highlighting within the current view page. This visual cue provides you with the choice to either save or cancel the changes, allowing for a seamless and efficient management of bulk modifications. +When you make edits or add new records, these changes are visually highlighted in green within the current view. This visual cue allows you to easily identify modified records and choose whether to save or cancel the changes, enabling seamless and efficient management of bulk modifications. {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids
Apply Batch Changes
@@ -981,7 +991,9 @@ When you make edits or add new records, these changes will be visually highlight } } {% endhighlight %} + {% highlight c# tabtitle="OrderDetails.cs" %} + public class OrderDetails { public static List Order = new List(); @@ -1021,6 +1033,7 @@ public class OrderDetails public string ShipCountry { get; set; } public DateTime OrderDate { get; set; } } + {% endhighlight %} {% endtabs %} diff --git a/blazor/datagrid/column-validation.md b/blazor/datagrid/column-validation.md index 80c6088cc4..9df71ddc60 100644 --- a/blazor/datagrid/column-validation.md +++ b/blazor/datagrid/column-validation.md @@ -1,23 +1,23 @@ --- layout: post -title: Column Validation in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Column Validation in Syncfusion Blazor DataGrid component and much more details. +title: Column Validation in Blazor DataGrid | Syncfusion +description: Checkout and learn here all about Column Validation in Syncfusion Blazor DataGrid and much more details. platform: Blazor control: DataGrid documentation: ug --- -# Validation in Blazor DataGrid component +# Validation in Blazor DataGrid -Validation is a crucial aspect of data integrity in any application. The Blazor Grid component in Syncfusion 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 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. ## Column validation -Column validation allows you to validate the edited or 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 the 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 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. -> Validation in datagrid works based on the Microsoft Blazor EditForm behavior. So once the validation message is shown then it will be again validated only during the form submit or when you focus out from that particular field. Refer 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) for further reference. +> Validation in DataGrid 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. -The following code example demonstrates how to define a validation rule for grid column: +The following code 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 the fields in the DataGrid. The validation attributes that are supported in the DataGrid are listed below. +Data annotation validation attributes are used to validate fields in the DataGrid. The following validation attributes are supported in the DataGrid: | Attribute Name | Functionality | -|-------|---------| -| Validations are,

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 | The data annotation validation attributes are used as `validation rules` in the 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 validation attributes are used as `validation rules` in DataGrid CRUD operations. | -More information on the data annotation can be found in this [documentation](https://blazor.syncfusion.com/documentation/datagrid/data-annotation) section. +For more information on data annotation, refer to this [documentation](https://blazor.syncfusion.com/documentation/datagrid/data-annotation) section. ## Custom validation -Custom Validation allows the users to customize the validations manually according to the individuals criteria. +Custom validation allows users to define their own validation logic based on specific requirements. -Custom Validation can be used by overriding the IsValid method inside the class inherits the Validation Attribute. All the validations are done 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 inside the `IsValid` method. -The following sample code demonstrates custom validations implemented in the fields **EmployeeID** and **Freight**. +The following sample code 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 perform validation for complex data binding columns 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 of data annotation. +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. -In the following sample, you must use the `ValidateComplexType` attribute for the EmployeeName class and display custom message in the "First Name" column using the `RequiredAttribute` of data annotation. +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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -303,16 +303,16 @@ public class EmployeeInfo ## 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 grid edit form. Such cases can be achieved using the **Validator** property of the **GridEditSettings** component which accepts a validation component and inject it inside the **EditForm** of the 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 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). -For creating a form validator component you can refer [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-and-input-components?view=aspnetcore-5.0#validator-components). +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 below code example, the following things have been done. +In the following code example: -* 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 Freight value is in between 0 to 100. -* Displayed the validation error messages using **ValidationMessage** component. +* 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. +* Validation error messages are displayed using the **ValidationMessage** component. ```csharp [MyCustomValidator.cs] @@ -400,9 +400,9 @@ public class MyCustomValidator : ComponentBase ## 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. +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. -Now the HandleValidation method of the MyCustomValidator component would be changed like below. +The `HandleValidation` method of the `MyCustomValidator` component can be updated as shown below. ```c# protected void HandleValidation(FieldIdentifier identifier) @@ -433,7 +433,7 @@ protected void HandleValidation(FieldIdentifier identifier) ## Disable in-built validator component -**Validator** property can also be used to disable the in-built validator component used by the grid. For instance, by default, the grid uses two validator components, **DataAnnotationValidator** and an internal [ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property handling validator, for handling edit form validation. If you are willing to use only the **DataAnnotationValidator** component, then it could be simply achieved by using the below code. +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. ```c# @@ -463,11 +463,11 @@ protected void HandleValidation(FieldIdentifier identifier) ## Display validation message in dialog template -Use the form validation to display a validation message for a column that is not defined in the grid. +Use form validation to display a validation message for a field that is not defined as a column in the Syncfusion Blazor DataGrid. -Use the **Validator** property to display a validation message for one of the fields in the dialog template that is not defined in the Grid column. The validation message for the **ShipAddress** is displayed in the dialog template in the following example. In the grid column, the **ShipAddress** field is not defined. +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. -> The validation message for fields that are not defined in the grid column will be shown as the validation summary (top of the dialog edit form) in the dialog edit form. +> Validation messages for fields not defined in the Grid columns will appear as a validation summary at the top of the dialog edit form. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/command-column-editing.md b/blazor/datagrid/command-column-editing.md index 27cd0171c0..57a5be5c8c 100644 --- a/blazor/datagrid/command-column-editing.md +++ b/blazor/datagrid/command-column-editing.md @@ -1,28 +1,28 @@ --- layout: post -title: Command Column Editing in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Command Column Editing in Syncfusion Blazor DataGrid component and much more details. +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. platform: Blazor control: DataGrid documentation: ug --- -# Command column editing in Blazor DataGrid component +# Command column editing in Blazor DataGrid -The command column editing feature allows you to add CRUD (Create, Read, Update, Delete) action buttons in a column for performing operations on individual rows.This feature is commonly used when you need to enable inline editing, deletion, or saving of row changes directly within the grid. +The command column editing feature allows you to add CRUD (Create, Read, Update, 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. -To enable command column editing, you can utilize 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 be displayed 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. By defining this property, you can specify the command buttons to display in the command column, such as Edit, Delete, Save, and Cancel. -The available built-in command buttons are: +The available built-in command buttons are: -| Command Button | Actions | -|----------------|---------| -| Edit | Edit the current row.| -| Delete | Delete the current row.| -| Save | Update the edited row.| -| Cancel | Cancel the edited state. | +| Command Button | Action | +|---------------|-----------------------------| +| Edit | Edit the current row. | +| Delete | Delete the current row. | +| 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: +Here's an example that demonstrates how to add CRUD action buttons in a column using the `GridCommandColumns` property: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -99,11 +99,11 @@ public class OrderDetails ## Custom command column -The custom command column feature in the Grid component 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 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. 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. -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: +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: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -204,4 +204,4 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/htVoDiBhCEmvtthU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The Grid component does not support adding a new record using the command column. Because, the command column, along with the command buttons, will be rendered only after the record is created. As a result, Grid only supported edit, delete, cancel, and update options in the command column. \ No newline at end of file +> 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. \ No newline at end of file diff --git a/blazor/datagrid/dialog-editing.md b/blazor/datagrid/dialog-editing.md index 05c6cc088e..ecb77da061 100644 --- a/blazor/datagrid/dialog-editing.md +++ b/blazor/datagrid/dialog-editing.md @@ -1,19 +1,19 @@ --- layout: post -title: Dialog Editing in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Dialog Editing in Syncfusion Blazor DataGrid component and much more details. +title: Dialog Editing in Blazor DataGrid | Syncfusion +description: Checkout and learn here all about Dialog Editing in Syncfusion Blazor DataGrid and much more details. platform: Blazor control: DataGrid documentation: ug --- -# Dialog editing in Blazor DataGrid component +# Dialog editing in Blazor DataGrid -Dialog editing is a feature in the Grid component that allows you to edit the data of the currently selected row using a dialog window. With dialog editing, you can easily modify cell values and save the changes back to the data source.This feature is particularly beneficial in scenarios where you need to quickly modify data without navigating to a separate page or view, and it streamlines the process of editing multiple cells. +Dialog editing is a feature in the Syncfusion Blazor DataGrid that allows you to edit the data of the currently selected row using a dialog window. With dialog editing, you can easily modify cell values and save the changes back to the data source. This feature is particularly beneficial in scenarios where you need to quickly modify data without navigating to a separate page or view, and it streamlines the process of editing multiple cells. -To enable dialog editing in grid component, you need to 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 determines the editing mode for the grid, and when set to **Dialog**, it enables the dialog editing feature. +To enable dialog editing in the Grid, you need to 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 determines the editing mode for the Grid, and when set to **Dialog**, it enables the dialog editing feature. -Here's an example how to enable dialog editing in the blazor grid component: +Here's an example of how to enable dialog editing in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -81,11 +81,11 @@ public class OrderDetails ## Customize the edit dialog -The edit dialog in the Grid component allows you to customize its appearance and behavior based on the type of action being performed, such as editing or adding a record. You can modify properties like header text, showCloseIcon, and height to tailor the edit dialog to your specific requirements. +The edit dialog in the Syncfusion Blazor DataGrid allows you to customize its appearance and behavior based on the type of action being performed, such as editing or adding a record. You can modify properties like header text, showCloseIcon, and height to tailor the edit dialog to your specific requirements. -To customize the edit dialog, you can use [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_HeaderTemplate) and [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_FooterTemplate) of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) property to customize the appearance of edit dialog. +To customize the edit dialog, use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_HeaderTemplate) and [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_FooterTemplate) properties of [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) to modify the appearance of the edit dialog. -The following example that demonstrates how to customize the edit dialog. +The following example demonstrates how to customize the edit dialog. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -128,11 +128,11 @@ The following example that demonstrates how to customize the edit dialog. } public async Task CancelEdit() { - await Grid.CloseEditAsync(); //Cancel editing action + await Grid.CloseEditAsync(); //Cancel editing action. } public async Task SaveEdit() { - await Grid.EndEditAsync(); //Save the edited/added data to Grid + await Grid.EndEditAsync(); //Save the edited/added data to Grid. } } {% endhighlight %} @@ -179,26 +179,23 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVyZWjvKbTMIaIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog's height up to 658px. -> * You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data. +> * The Grid add or edit dialog element has a max-height property, which is calculated based on the available window height. In a standard window (1920 x 1080), you can set the dialog's height up to 658px. +> * Refer to our [Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for an overview of its features. You can also explore our [Grid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to see how to present and manipulate data. ## Show or hide columns in dialog editing -The show or hide columns in dialog editing feature in the grid allows you to dynamically control the visibility of columns while editing in the dialog edit mode. This feature is useful when you want to display specific columns based on the type of action being performed, such as editing an existing record or adding a new record. To achieve this, you can utilize the following events of the Grid. +The show or hide columns in dialog editing feature in the Syncfusion Blazor DataGrid allows you to dynamically control the visibility of columns while editing in dialog edit mode. This feature is useful when you want to display specific columns based on the type of action being performed, such as editing an existing record or adding a new record. To achieve this, you can utilize the following Grid events: -1. [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating): Triggered before an add action is executed in the grid. +1. [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating): Triggered before an add action is executed in the Grid. +2. [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing): Triggered before an edit action is executed in the Grid. +3. [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating): Triggered before an update action is executed in the Grid. +4. [EditCanceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_EditCanceling): Triggered before a cancel action is executed in the Grid. -2. [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing): Triggered before an edit action is executed in the grid. +The `RowCreating` and `RowEditing` events are triggered whenever an action such as adding or editing a record is initiated in the Grid. Within the event handlers, you can modify the visibility of columns using the [Column.Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property. This property determines whether a column should be displayed or hidden. -3. [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting): Triggered before a update action is executed in the grid. +Additionally, you can reset the column visibility to its initial state using the `Column.Visible` property in the `RowUpdating` and `EditCanceling` events of the Grid. -4. [EditCanceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_EditCanceling): Triggered before a cancel action is executed in the grid. - -The `RowCreating` and `RowEditing` events are triggered whenever an action such as adding or editing a record is initiated in the grid. Within the events handler, you can modify the visibility of columns using the [Column.Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property. This property determines whether a column should be displayed or hidden. - -Additionally, you can reset the column visibility to its initial state using the `Column.Visible` property using `RowUpdating` and `EditCanceling` events of grid. - -In the following example, the **CustomerID** column is rendered as a hidden column, and the **ShipCountry** column is rendered as a visible column. In the edit mode, the **CustomerID** column will be changed to a visible state and the **ShipCountry** column will be changed to a hidden state. +In the following example, the **CustomerID** column is initially hidden, and the **ShipCountry** column is visible. In edit mode, the **CustomerID** column is shown, and the **ShipCountry** column is hidden. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -323,13 +320,13 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/VXrzWVLAqtMKVgod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Use wizard like dialog editing +## Use wizard-like dialog editing -Wizard-like dialog editing is a powerful feature in the Grid component that enables the creation of intuitive step-by-step forms. This feature provides a structured approach to form completion or data entry by breaking down the process into manageable steps.This feature is particularly useful when you have complex forms that need to be broken down into smaller sections to guide you through the data entry process. +Wizard-like dialog editing is a powerful feature in the Syncfusion Blazor DataGrid that enables the creation of intuitive, step-by-step forms. This approach provides a structured way to complete forms or enter data by breaking the process into manageable steps. It is especially useful for complex forms that need to be divided into smaller sections, guiding users through the data entry process. -To achieve wizard-like dialog editing in the grid component, you can use the template feature. This feature allows you to define your own custom editing template using the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property set to **Dialog** and the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) property of [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) to specify the template variable that defines the editors for each step of the wizard. +To implement wizard-like dialog editing in the Grid, use the template feature. This allows you to define a custom editing template by setting the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Dialog** and specifying the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) property of [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html). The template defines the editors for each step of the wizard. -The following example demonstrate the wizard like editing in the grid with the unobtrusive validation. +The following example demonstrates wizard-like editing in the Grid with unobtrusive validation. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -559,9 +556,9 @@ public class OrderDetails ## Customize add/edit dialog footer -The Customize add/edit dialog footer feature in the grid allows you to modify the footer section of the dialog that appears when editing the currently selected row or adding a new row. By default, the dialog displays two buttons in the footer section: Save and Cancel, which allow you to save or discard the changes made in the dialog. This feature is particularly helpful when you want to add custom buttons to the dialog's footer, implement specific actions, or customize the appearance of the buttons, such as changing their color or size in the dialog's footer. This can be achieved using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_FooterTemplate) of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) property of the Grid component. +The customize add/edit dialog footer feature in the Syncfusion Blazor DataGrid allows you to modify the footer section of the dialog that appears when editing the currently selected row or adding a new row. By default, the dialog displays two buttons in the footer section: Save and Cancel, which let you save or discard the changes made in the dialog. This feature is particularly helpful when you want to add custom buttons to the dialog's footer, implement specific actions, or customize the appearance of the buttons, such as changing their color or size. You can achieve this using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_FooterTemplate) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html). -In the following sample, the action for the custom button can be customized using the `FooterTemplate` property of the `GridEditSettings`. +In the following sample, the action for the custom button is defined using the `FooterTemplate` property of the `GridEditSettings`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -641,11 +638,11 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/LXrIDWZdLWqNBqts?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Implement calculated column inside grid dialog editing +## Implement calculated column inside Grid dialog editing -You can automatically update the value of a column based on the edited value of another column using Cell Edit Template feature. This feature is useful when you want to dynamically calculate and update a column's value in real-time based on changes made to another related column. +You can automatically update the value of a column based on the edited value of another column using the Cell Edit Template feature. This feature is useful when you want to dynamically calculate and update a column's value in real time based on changes made to another related column. -In the following sample, the `SfNumericTextBox` component is rendered inside the dialog edit form. We have updated the **Total** column value 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 is achieved in combination with 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). +In the following sample, the `SfNumericTextBox` is rendered inside the dialog edit form. The **Total** column value is updated 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 is achieved in combination with 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). {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/in-line-editing.md b/blazor/datagrid/in-line-editing.md index 0806fd8744..8aea5aff38 100644 --- a/blazor/datagrid/in-line-editing.md +++ b/blazor/datagrid/in-line-editing.md @@ -1,17 +1,17 @@ --- layout: post -title: Inline Editing in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Inline Editing in Syncfusion Blazor DataGrid component and much more details. +title: Inline Editing in Blazor DataGrid | Syncfusion +description: Checkout and learn here all about Inline Editing in Syncfusion Blazor DataGrid and much more details. platform: Blazor control: DataGrid documentation: ug --- -# Inline editing in Blazor DataGrid component +# Inline editing in Blazor DataGrid -The Blazor DataGrid component provides a powerful in-line editing feature that allows you to edit cell values of row directly within the grid. This feature is especially useful when you want to quickly modify data without the need for a separate edit form. In normal edit mode, the selected record is changed to an edit state, and you can modify the cell values and save the edited data to the data source. +The Syncfusion Blazor DataGrid provides a powerful in-line editing feature that allows you to edit the cell values of a row directly within the Grid. This feature is especially useful when you want to quickly modify data without the need for a separate edit form. In normal edit mode, the selected record is switched to an editable state, allowing you to modify the cell values and save the changes to the data source. -To enable in-line editing in the grid component, you need to set the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property of the Grid's configuration to **Normal**. This property determines the editing mode of the Grid. +To enable in-line editing in the Grid, set the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property of the Grid's configuration to **Normal**. This property determines the editing mode of the Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -83,11 +83,11 @@ public class OrderDetails ## Automatically update a specific column based on another column edited value -You can automatically update the value of a column based on the edited value of another column using Cell Edit Template feature. This feature is useful when you want to dynamically calculate and update a column's value in real-time based on changes made to another related column. +You can automatically update the value of a column based on the edited value of another column using the Cell Edit Template feature. This is useful when you want to dynamically calculate and update a column's value in real time based on changes made to another related column. -You can update the column value based on another column’s edited value in normal mode by using the [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating) and the [RowEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEdited) events, along with the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the Grid. +You can update a column value based on another column’s edited value in normal mode by using the [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating) and [RowEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEdited) events, along with the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the Grid. -In the following example, the **TotalCost** column value is updated based on changes to the **UnitPrice** and **UnitInStock** columns during normal editing. +In the following example, the **TotalCost** column value is updated based on changes to the **UnitPrice** and **UnitsInStock** columns during normal editing. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -197,19 +197,19 @@ public class ProductDetails ## Cancel edit based on condition -The grid provides the ability to cancel the edit operations for particular row or cell based on specific conditions. This feature allows you to control over whether editing should be allowed or prevented for certain rows or cells in the grid. +The Syncfusion Blazor DataGrid provides the ability to cancel edit operations for a particular row or cell based on specific conditions. This feature allows you to control whether editing should be allowed or prevented for certain rows or cells in the Grid. -To cancel the edit operation based on a specific condition, you can handle the following events of grid component. These events are triggered when a CRUD (Create, Read, Update, Delete) operation is performed in the grid. +To cancel an edit operation based on a specific condition, you can handle the following Grid events. These events are triggered when a CRUD (Create, Read, Update, and Delete) operation is performed in the Grid: -1. [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating): Triggered before an add action is executed in the grid. +1. [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating): Triggered before an add action is executed in the Grid. -2. [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting): Triggered before a delete action is executed in the grid. +2. [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting): Triggered before a delete action is executed in the Grid. -3. [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing): Triggered before an edit action is executed in the grid. +3. [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing): Triggered before an edit action is executed in the Grid. -By applying your desired condition, you can cancel the edit, delete, or add operation by setting the args.Cancel property to **true**. +By applying your desired condition, you can cancel the edit, delete, or add operation by setting the `args.Cancel` property to **true**. -In the below demo, prevent the CRUD operation based on the **Role** column value. If the Role Column is **Admin**, then edit/delete action is prevented for that row. +In the demo below, CRUD operations are prevented based on the **Role** column value. If the Role column is **Admin**, then edit and delete actions are prevented for that row. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -308,19 +308,19 @@ public class EmployeeDetails ## Perform CRUD action programmatically -Performing CRUD actions programmatically refers to the ability to create, read, update, and delete data in a system or application using code instead of manual user interaction. +Performing CRUD actions programmatically means creating, reading, updating, and deleting data in a system or application using code instead of manual user interaction. -* To add a new record to the Grid, use the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync__0_System_Nullable_System_Int32__) method. In this method, you can pass the **data** parameter to add a new record to the Grid, and the **index** parameter to add a record at a specific index. If you call this method without any parameters, it will create an empty row in the Grid. If an index is not specified, the newly added record will be displayed at the zeroth index. +* To add a new record to the Grid, use the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync__0_System_Nullable_System_Int32__) method. You can pass the **data** parameter to add a new record, and the **index** parameter to add a record at a specific position. If you call this method without any parameters, it will create an empty row in the Grid. If an index is not specified, the new record will be displayed at the zeroth index. -* To change the selected row to the edit state, use the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) method. Before invoking this method, it is necessary to select a row in the grid. +* To change the selected row to the edit state, use the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) method. Before invoking this method, you must select a row in the Grid. -* If you need to update the row data in the Grid’s data source, you can use the [UpdateRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateRowAsync_System_Int32__0_) method. In this method, you need to pass the **index** value of the row to be updated along with the updated **data**. +* To update the row data in the Grid’s data source, use the [UpdateRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateRowAsync_System_Int32__0_) method. Pass the **index** of the row to be updated along with the updated **data**. -* If you need to update the particular cell in the row, you can use the [SetCellValueAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetCellValueAsync_System_Object_System_String_System_Object_) method. In this method, you need to pass the primary key value of the data source, field name, and new value for the particular cell. When using this method, any changes made to a cell will only be reflected visually in the UI of Grid alone, not persisted or saved in the underlying data source. This method is commonly employed for unbound columns, such as auto-calculated columns or formula columns, where the values are derived or computed based on other data within the Grid or external calculations. By using this method, you can update the visual representation of these unbound columns without modifying the actual data source. +* To update a particular cell in a row, use the [SetCellValueAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetCellValueAsync_System_Object_System_String_System_Object_) method. Pass the primary key value, field name, and new value for the cell. Changes made using this method are only reflected visually in the Grid UI and are not persisted in the underlying data source. This method is commonly used for unbound columns, such as auto-calculated or formula columns, where values are derived from other data within the Grid or external calculations. * To remove a selected row from the Grid, use the [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) method. For both edit and delete operations, you must select a row first. -> In both normal and dialog editing modes, these methods can be used. +> These methods can be used in both normal and dialog editing modes. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -448,9 +448,9 @@ public class OrderDetails ## Show confirmation dialog while deleting -Displaying a confirmation dialog adds an extra layer of confirmation when deleting a record from the grid. This dialog prompts for confirmation before proceeding with the deletion, ensuring that accidental or undesired deletions are avoided. The deletion can proceed only if the decision is certain. The grid component provides a built-in confirmation dialog that can be used to confirm a deleting action. +Displaying a confirmation dialog adds an extra layer of safety when deleting a record from the Syncfusion Blazor DataGrid. This dialog prompts the user for confirmation before proceeding with the deletion, helping to prevent accidental or unintended deletions. The deletion will only proceed if the user confirms the action. The Grid provides a built-in confirmation dialog for this purpose. -To enable the confirmation dialog for the delete operation in the Grid, you can set the [ShowDeleteConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowDeleteConfirmDialog) property of the `GridEditSettings` configuration to **true**. By default, this property is set to **false**. +To enable the confirmation dialog for delete operations in the Grid, set the [ShowDeleteConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowDeleteConfirmDialog) property of the `GridEditSettings` configuration to **true**. By default, this property is set to **false**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -531,9 +531,9 @@ public class OrderDetails ## Display default value for columns while adding -This feature is useful when you want to pre-fill certain column values with default values to streamline the data entry process. The grid component allows you to set default values for columns when adding a new record. +This feature is useful when you want to pre-fill certain column values with default values to streamline the data entry process. The Grid allows you to set default values for columns when adding a new record. -To set a default value for a specific column in the Grid, you can use the [DefaultValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DefaultValue) property of the `GridColumns` configuration. By providing a default value, the grid will automatically populate that value in the corresponding column when a new row is added. +To set a default value for a specific column in the Grid, use the [DefaultValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DefaultValue) property of the `GridColumns` configuration. When a new row is added, the Grid will automatically populate the specified default value in the corresponding column. Here's an example of how to set a default value for a column: @@ -607,13 +607,13 @@ public class OrderDetails ## Delete multiple rows -The delete multiple rows feature in the grid component allows you to easily remove multiple rows from the grid at once. This feature is useful when you want to delete multiple records simultaneously. There are two approaches to implement this feature: using the inbuilt toolbar delete option or using a method. +The delete multiple rows feature in the Syncfusion Blazor DataGrid allows you to easily remove several rows at once. This is useful when you need to delete multiple records simultaneously. There are two ways to implement this feature: using the built-in toolbar delete option or by calling a method. -**Using the inbuilt toolbar delete option** +**Using the built-in toolbar delete option** -The grid component provides a user-friendly interface for performing various actions, including deleting rows using the inbuilt toolbar. To enable the delete multiple rows using the toolbar, you need to configure the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property of the grid and set the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property as **multiple** to enable multiple row selection. +The Syncfusion Blazor DataGrid provides a user-friendly interface for performing actions such as deleting rows through the built-in toolbar. To enable deleting multiple rows using the toolbar, configure the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property and set the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Multiple** to allow multiple row selection. -To delete multiple selected records in the grid, first you need to select multiple rows in the grid by highlighting or checking the corresponding checkboxes. Once the desired rows are selected, you can click on the delete icon located in the toolbar. This action will initiate the deletion process and remove the selected records from the grid. +To delete multiple selected records, first select the desired rows in the Grid by highlighting or checking their checkboxes. Then, click the delete icon in the toolbar. This will remove the selected records from the Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -681,18 +681,18 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/BNLpiBMkLcuVmJPN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> Also delete the selected records using keyboard shortcut key **delete**. +> You can also delete the selected records using the **Delete** keyboard shortcut. **Using method** -You can delete multiple rows programmatically by using [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) method. This method allows you to delete a record with the given options. If the **fieldname** (field name of the primary key column) and **data** parameters are not provided, the grid will delete the selected records. +You can delete multiple rows programmatically by using the [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) method. This method allows you to delete records with the given options. If the **fieldName** (the field name of the primary key column) and **data** parameters are not provided, the Grid will delete the selected records. ```ts - Grid.DeleteRecordAsync(); +Grid.DeleteRecordAsync(); ``` -> * The `GridSelectionSettings.Type` property is set to **Multiple** to enable multiple row selection. -> * To prevent accidental or undesired deletions, it is recommended to enable the `ShowDeleteConfirmDialog` property of the `GridEditSettings` configuration. +> * The `GridSelectionSettings.Type` property must be set to **Multiple** to enable multiple row selection. +> * To prevent accidental or undesired deletions, it is recommended to enable the `ShowDeleteConfirmDialog` property in the `GridEditSettings` configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -766,13 +766,13 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/hDLStsZBUpReRDUm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Adding a new row at the bottom of the grid +## Adding a new row at the bottom of the Grid -The grid component allows you to add a new row at the bottom of the grid, allowing you to insert a new record at the end of the existing data set. This feature is particularly useful when you want to conveniently add new records without the need of scroll up or manually reposition the newly added row. +The Syncfusion Blazor DataGrid allows you to add a new row at the bottom, enabling you to insert a new record at the end of the existing data set. This feature is especially useful when you want to conveniently add new records without scrolling up or manually repositioning the newly added row. -By default, when adding a new row in the grid component, the row is inserted at the top of the grid. However, you can change this behavior by setting the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property of the `GridEditSettings` configuration to **Bottom**. This property determines the position where the new row will be inserted. +By default, when adding a new row, the Grid inserts it at the top. However, you can change this behavior by setting the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property of the `GridEditSettings` configuration to **Bottom**. This property determines where the new row will be inserted. -Here's an example of how to enable adding new rows at the bottom of the grid: +Here's an example of how to enable adding new rows at the bottom of the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -864,13 +864,13 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/BZhTCBWEJgzWWmwI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> Add `NewRowPostion` is supported for **Normal** and **Batch** editing modes. +> The `NewRowPosition` property is supported for **Normal** and **Batch** editing modes. -## Show add new row always in grid +## Show add new row always in Grid -The Syncfusion® Grid simplifies the addition of new records by consistently presenting a blank, “add new row” form within the grid. To enable this feature, you can set the [ShowAddNewRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowAddNewRow) property within the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) configuration to **true**. This allows for continuous addition of new records. You can display the add a new row at either the top or bottom of the grid content, depending on the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property of `GridEditSettings`. By default, the add new row is displayed at the top row of the grid content. +The Syncfusion® Grid simplifies the addition of new records by consistently presenting a blank "add new row" form within the Grid. To enable this feature, set the [ShowAddNewRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowAddNewRow) property within the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) configuration to **true**. This allows for continuous addition of new records. You can display the add new row at either the top or bottom of the Grid content, depending on the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property of `GridEditSettings`. By default, the add new row is displayed at the top of the Grid content. -The following sample demonstrates how to add a new record continuously using `ShowAddNewRow` property. +The following sample demonstrates how to add a new record continuously using the `ShowAddNewRow` property. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -935,22 +935,21 @@ public class OrderDetails {% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/rjLfiLskTTrNxaux?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -> To save the newly added records, you can either hit the **Enter** key or click on the **Update** button located on the toolbar after filling in the new add form. +> To save newly added records, you can either press the **Enter** key or click the **Update** button on the toolbar after filling in the new add form. ### Limitations -* This feature is supported only for Inline/Normal editing mode and is not compatible with other edit modes. -* The new blank add row form will always be displayed at the top, even if you have set the new row position as the bottom for Virtual Scrolling and Infinite Scrolling enabled grid. +* This feature is supported only in Inline/Normal editing mode and is not compatible with other edit modes. +* The new blank add row form will always be displayed at the top, even if you set the new row position to bottom for Grids with Virtual Scrolling or Infinite Scrolling enabled. * This feature is not compatible with the column virtualization feature. ## Enable editing in single click -Enabling single-click editing in the Syncfusion® Grid's **Normal** editing mode is a valuable feature that allows you to make a row editable with just one click.This can be achieved by using the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) and [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) methods. +Enabling single-click editing in the Syncfusion Blazor DataGrid's **Normal** editing mode is a valuable feature that allows you to make a row editable with just one click. This can be achieved by using the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) and [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) methods. + +To implement this feature, bind the [OnRecordClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnRecordClick) event of the Grid. Within the event handler, call the `StartEditAsync` method to begin editing the clicked row and the `EndEditAsync` method to save or cancel editing for a previously edited row. This ensures that editing mode is triggered when a specific record in the Grid is clicked. -To implement this feature, you need to bind the [OnRecordClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnRecordClick) event of the Grid. Within the event handler, call the `StartEditAsync` method to begin editing the clicked row and the `EndEditAsync` method to save or cancel editing for a previously edited row. This ensures that the editing mode is triggered when a specific record in the Grid is clicked. - -The following sample demonstrates how to enable editing in a single click using the `OnRecordClick` event: +The following sample demonstrates how to enable editing with a single click using the `OnRecordClick` event: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -977,18 +976,20 @@ The following sample demonstrates how to enable editing in a single click using { if (Grid.IsEdit && CurrentRowIndex != args.RowIndex) { - // End editing for the previously edited row + // End editing for the previously edited row. await Grid.EndEditAsync(); } // Update the currently selected row index CurrentRowIndex = args.RowIndex; await Grid.SelectRowAsync(args.RowIndex); - // Start editing the clicked row + // Start editing the clicked row. await Grid.StartEditAsync(); } } {% endhighlight %} + {% highlight c# tabtitle="OrderDetails.cs" %} + public class OrderDetails { public static List Order = new List(); @@ -1033,11 +1034,11 @@ public class OrderDetails ## Disable editing for a particular row -In the Syncfusion® Grid component, you can prevent editing of specific rows based on certain conditions. This feature is useful when you want to restrict editing for certain rows , such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the grid. +In the Syncfusion Blazor DataGrid, you can prevent editing of specific rows based on certain conditions. This feature is useful when you want to restrict editing for certain rows, such as those containing read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the Grid. -To disable editing for a particular row, use the [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing) event of the grid. You can then set the **args.Cancel** property to **true** to prevent editing for that row. +To disable editing for a particular row, use the [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing) event of the Grid. You can set the **args.Cancel** property to **true** within this event to prevent editing for that row. -In the below demo, the rows which are having the value for **ShipCountry** column as **France** is prevented from editing. +In the demo below, rows with the value **France** in the **ShipCountry** column are prevented from being edited. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1068,7 +1069,9 @@ In the below demo, the rows which are having the value for **ShipCountry** colum } } {% endhighlight %} + {% highlight c# tabtitle="OrderDetails.cs" %} + public class OrderDetails { public static List Order = new List(); @@ -1113,16 +1116,16 @@ public class OrderDetails ## Provide new item or edited item using events -Grid uses `Activator.CreateInstance()` to create or clone new record instance during add and edit operations, so it must have parameterless constructors defined for the model class and any referenced complex type classes. +The Syncfusion Blazor DataGrid uses `Activator.CreateInstance()` to create or clone a new record instance during add and edit operations, so the model class and any referenced complex type classes must have parameterless constructors defined. -There are cases where custom logic is required to create a new object, or a new object instance cannot be created using `Activator.CreateInstance()`. In such cases, you can manually provide model object instance using events. +However, there are cases where custom logic is required to create a new object, or a new object instance cannot be created using `Activator.CreateInstance()`. In such cases, you can manually provide the model object instance using events. You can use the [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating) and [OnBeginEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBeginEdit) events to provide a new object instance during creation and editing operations. The new object should be assigned to the `RowCreating.Data` and `OnBeginEdit.RowData` properties. In the following example: -* A model class without parameter-less constructor is bound with the grid. -* Enabled inline editing feature in grid. +* A model class without a parameterless constructor is bound to the Grid. +* Inline editing is enabled in the Grid. * The `RowCreating` event is used to assign default values for new rows. * The `OnBeginEdit` event is used to clone the current row's data when editing an existing item.