diff --git a/blazor/common/showcase-samples.md b/blazor/common/showcase-samples.md
index 75ca231737..dc62ce42f5 100644
--- a/blazor/common/showcase-samples.md
+++ b/blazor/common/showcase-samples.md
@@ -23,7 +23,7 @@ Syncfusion® has a collection of sample appl
| Organizational Chart | An organizational chart is a diagram that visually conveys a company's internal structure by detailing the roles, responsibilities, and relationships between individuals within an entity. | [Server](https://blazor.syncfusion.com/showcase/organization-chart/)/[WASM](https://blazor.syncfusion.com/showcase/wasm/organization-chart/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-organizational-chart) |
| Document Explorer | Manages the file system that allows users to access, edit, and sort files or folders and open Word, PowerPoint, and PDF documents. | [Server](https://blazor.syncfusion.com/showcase/documentexplorer/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-document-explorer) |
| Sprint Management | Sprint management involves managing the sprint board of an organization. It allows teams to track tasks, allocate work, and monitor progress during a sprint. | [Server](https://blazor.syncfusion.com/showcase/sprint-management/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-sprint-management) |
-| Hotel Booking | Hotel Booking App empowers hotel owners by streamlining room bookings, management, and offering real-time insights into occupancy, including current bookings and available rooms per floor. | [Server](https://blazor.syncfusion.com/showcase/hotel-booking) | [GitHub code](https://github.com/syncfusion/blazor-showcase-hotel-booking) |
+| Stay Reservation |Stay Reservation simplifies room bookings, streamlines management for hotel owners, and provides real-time insights into occupancy, including active reservations and available rooms by floor. | [Server](https://blazor.syncfusion.com/showcase/stay-reservation) | [GitHub code](https://github.com/syncfusion/blazor-showcase-stay-reservation)|
| Stock Market Dashboard | StockMarket Dashboard Showcase app is a comprehensive tool that provides real-time data, analytics, and insights for investors, displaying key financial metrics and market trends in an intuitive interface. | [Server](https://blazor.syncfusion.com/showcase/stockmarket-dashboard/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-stockmarket-dashboard) |
| Fitness Tracker | Track and visualize data of your daily activities, diet and fasting to track fitness of daily statistics. | [Server](https://blazor.syncfusion.com/showcase/fitness-tracker/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-fitness-tracker) |
| Loan Calculator | Calculate loan payments, interest rates, and amortization schedules. When you are planning for a personal loan or analyzing business financing options, this provides accurate results and helps you make informed financial decisions. | [WASM](https://blazor.syncfusion.com/showcase/wasm/loan-calculator/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-loan-calculator) |
diff --git a/blazor/datagrid/batch-editing.md b/blazor/datagrid/batch-editing.md
index 71d1e2f8b6..b9081fde79 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 Blazor DataGrid
-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
@@ -893,8 +898,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();
@@ -934,6 +942,7 @@ public class OrderDetails
public string ShipCountry { get; set; }
public DateTime OrderDate { get; set; }
}
+
{% endhighlight %}
{% endtabs %}
@@ -941,12 +950,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
@using Syncfusion.Blazor.Buttons
@@ -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..6fe7f0288f 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 Grid 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 Grid:
| 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 3a4ca2cc5a..648afb811c 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 and 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,7 +204,7 @@ 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.
+> 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.
## Hide the command column button in a specific record
@@ -287,4 +287,4 @@ This is demonstrated in the following steps where the `RowDataBound` event is tr
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLetprbTsENCfsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLetprbTsENCfsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
diff --git a/blazor/datagrid/data-binding.md b/blazor/datagrid/data-binding/data-binding.md
similarity index 88%
rename from blazor/datagrid/data-binding.md
rename to blazor/datagrid/data-binding/data-binding.md
index 89d0b79826..bc2c091b90 100644
--- a/blazor/datagrid/data-binding.md
+++ b/blazor/datagrid/data-binding/data-binding.md
@@ -1,7 +1,7 @@
---
layout: post
title: Data Binding in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Data Binding in Syncfusion Blazor DataGrid and much more.
+description: Learn how to bind data from various sources to the Syncfusion Blazor DataGrid and explore supported data binding options in detail.
platform: Blazor
control: DataGrid
documentation: ug
@@ -18,4 +18,4 @@ It supports two kinds of data binding methods:
* Local data
* Remote data
-> When using [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) as `IEnumerable`, the component type (TValue) will be inferred from its value. When using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) for data binding, the **TValue** must be provided explicitly in the Grid.
\ No newline at end of file
+> When using [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) as `IEnumerable`, the component type (TValue) will be inferred from its value. When using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) for data binding, the **TValue** must be provided explicitly in the Grid.
diff --git a/blazor/datagrid/local-data.md b/blazor/datagrid/data-binding/local-data.md
similarity index 99%
rename from blazor/datagrid/local-data.md
rename to blazor/datagrid/data-binding/local-data.md
index c8442ffc4f..25ceaa8367 100644
--- a/blazor/datagrid/local-data.md
+++ b/blazor/datagrid/data-binding/local-data.md
@@ -1,7 +1,7 @@
---
layout: post
title: Local Data in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Local Data in Syncfusion Blazor DataGrid and much more.
+description: Explore how to bind and display local data in the Syncfusion Blazor DataGrid using various approaches and customization options.
platform: Blazor
control: DataGrid
documentation: ug
@@ -1423,7 +1423,7 @@ builder.Services.AddSingleton();
The following screenshot illustrates the addition, editing, and deletion operations performed, with changes reflected across all client sides.
-
+
Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/databinding-in-blazor-datagrid/tree/master/SignalRDataGrid).
diff --git a/blazor/datagrid/dialog-editing.md b/blazor/datagrid/dialog-editing.md
index 4070cced2e..7c4c112868 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" %}
@@ -642,11 +639,11 @@ public class OrderDetails
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLSZyKtglluvsMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Implement calculated column inside grid dialog editing
+## Implement calculated column inside Blazor DataGrid 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/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md
index e1ca856b34..56a597a693 100644
--- a/blazor/datagrid/foreignKey-column.md
+++ b/blazor/datagrid/foreignKey-column.md
@@ -321,11 +321,11 @@ In the following code example, the Employee Name is a foreign key column. When e
{% previewsample "https://blazorplayground.syncfusion.com/embed/rthqiCZnKFZSBjXt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customize filter UI in foreignkey column
+## Customize filter UI in foreign key column
The Syncfusion Blazor DataGrid allows you to customize the filtering user interface (UI) for foreign key columns by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. By default, a dropdown is used for filtering foreign key columns. However, you can create your own custom filtering UI by [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. Here’s an example that demonstrates how to create a custom filtering UI in a foreign key column:
-> For all filter types other than FilterBar, filtering parameters will be sent in the form of `PredicateModel`. Here, T represents the type of `ForeignKeyValue` property when using the foreignkey column.
+> For all filter types other than FilterBar, filtering parameters will be sent in the form of `PredicateModel`. Here, T represents the type of `ForeignKeyValue` property when using the foreign key column.
In this example, a `DropDownList` is rendered as the filter UI for the **“EmployeeID”** foreign key column. The **DataSource** property of the `SfDropDownList` is set to the employees data, and the Fields property is configured to display the **FirstName** field as the text and **EmployeeID** field as the value. The `value` property is set to the current filter value of the column.
@@ -688,9 +688,9 @@ public class EmployeeDetails
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVzisLyKJzudYVg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Prevent filter query generation for foreignkey column
+## Prevent filter query generation for foreign key column
-By default, a filter query for the foreignkey column will be generated based on the foreignkey value. You can prevent the default filter query generation for the foreignkey column and add the custom filter query. This can be achieved by setting the [PreventFilterQuery](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ActionEventArgs-1.html#Syncfusion_Blazor_Grids_ActionEventArgs_1_PreventFilterQuery) argument of the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event to true.
+By default, a filter query for the foreign key column will be generated based on the foreign key value. You can prevent the default filter query generation for the foreign key column and add the custom filter query. This can be achieved by setting the [PreventFilterQuery](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ActionEventArgs-1.html#Syncfusion_Blazor_Grids_ActionEventArgs_1_PreventFilterQuery) argument of the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event to true.
In the following code sample, you can prevent default filter query generation using the `PreventFilterQuery` property and generate a custom filter query to execute a filter operation:
@@ -991,4 +991,408 @@ public class EmployeeDetails
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBJCLZnLheGLept?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-prevent-query-generation-for-foriegnkey-column).
\ No newline at end of file
+> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-prevent-query-generation-for-foriegnkey-column).
+
+## Edit template in foreign key column using remote data
+
+The Syncfusion Blazor DataGrid allows you to customize the edit template for foreign key columns when using remote data. By default, a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is used for editing foreign key column. Other editable components can be rendered using the edit template feature of Grid.
+
+This example demonstrates how to use an edit template in a foreign key column with remote data. In this case, an [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) is rendered as the edit template for the **EmployeeID** foreign key column. You can use `SfDataManager` instead of the `DataSource` property to bind remote data. Follow the steps below to achieve this:
+
+**1. Create a Blazor web app**
+
+You can create a **Blazor Web App** named **EditTemplate** using Visual Studio 2022, either via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). Make sure to configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows).
+
+**2. Install Syncfusion Blazor DataGrid, AutoComplete, and Themes NuGet Packages**
+
+To add the `Grid` and `AutoComplete` in the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/), [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns), and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+
+If your Blazor Web App uses `WebAssembly` or `Auto` render modes, install the Syncfusion Blazor NuGet packages in the client project.
+
+Alternatively, use the following Package Manager commands:
+
+```powershell
+Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }}
+```
+
+> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages.
+
+**3. Register Syncfusion Blazor service**
+
+- Open the **~/_Imports.razor** file and import the required namespaces.
+
+```razor
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+```
+
+- Register the Syncfusion Blazor service in the **~/Program.cs** file.
+
+```csharp
+using Syncfusion.Blazor;
+
+builder.Services.AddSyncfusionBlazor();
+```
+
+For apps using `WebAssembly` or `Auto (Server and WebAssembly)` render modes, register the service in both **~/Program.cs** files.
+
+**4. Add stylesheet and script resources**
+
+Include the theme stylesheet and script references in the **~/Components/App.razor** file.
+
+```html
+
+ ....
+
+
+....
+
+ ....
+
+
+```
+
+> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for various methods to include themes (e.g., Static Web Assets, CDN, or CRG).
+> * Set the render mode to **InteractiveServer** or **InteractiveAuto** in your Blazor Web App configuration.
+
+**5. Register controllers in `Program.cs`**
+
+Add the following lines in the `Program.cs` file to register controllers:
+
+```csharp
+// Register controllers in the service container.
+builder.Services.AddControllers();
+
+// Map controller routes.
+app.MapControllers();
+```
+
+**6. Create a model class**
+
+Create a new folder named **Models**. Inside this folder, add a model class named **OrdersDetails.cs** to represent the order data, and another model class named **EmployeeData.cs** to represent the employee data.
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+
+namespace EditTemplate.Models
+{
+ public class OrdersDetails
+ {
+ private static List order = new List();
+ public OrdersDetails() { }
+
+ public OrdersDetails(int OrderID, string CustomerID, int EmployeeID, string ShipName, string ShipCountry)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.EmployeeID = EmployeeID;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrdersDetails(1, "ALFKI", 1, "Simons Bistro", "Denmark"));
+ order.Add(new OrdersDetails(2, "ANATR", 2, "Queen Cozinha", "Brazil"));
+ order.Add(new OrdersDetails(3, "ANTON", 3, "Frankenversand", "Germany"));
+ order.Add(new OrdersDetails(4, "BLONP", 4, "Ernst Handel", "Austria"));
+ order.Add(new OrdersDetails(5, "BOLID", 5, "Hanari Carnes", "Switzerland"));
+ order.Add(new OrdersDetails(6, "ALFKI", 6, "Smith Foods", "UK"));
+ order.Add(new OrdersDetails(7, "ANATR", 7, "La Cuisine", "France"));
+ order.Add(new OrdersDetails(8, "ANTON", 8, "Gourmet Market", "USA"));
+ order.Add(new OrdersDetails(9, "BLONP", 9, "Pasta Supremo", "Italy"));
+ order.Add(new OrdersDetails(10, "BOLID", 10, "Frankenversand", "Germany"));
+ }
+ return order;
+ }
+
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public string? ShipName { get; set; }
+ public string? ShipCountry { get; set; }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="EmployeeData.cs" %}
+
+namespace EditTemplate.Models
+{
+ public class EmployeeData
+ {
+ public int? EmployeeID { get; set; }
+ public string? FirstName { get; set; }
+ public string? LastName { get; set; }
+ public string? Department { get; set; }
+ public string? Email { get; set; }
+ public string? PhoneNumber { get; set; }
+
+ public static List GetAllRecords()
+ {
+ return new List
+ {
+ new EmployeeData { EmployeeID = 1, FirstName = "John", LastName = "Doe", Department = "Sales", Email = "john.doe@example.com", PhoneNumber = "123-456-7890" },
+ new EmployeeData { EmployeeID = 2, FirstName = "David", LastName = "Smith", Department = "Marketing", Email = "david.smith@example.com", PhoneNumber = "987-654-3210" },
+ new EmployeeData { EmployeeID = 3, FirstName = "Maria", LastName = "Gonzalez", Department = "HR", Email = "maria.gonzalez@example.com", PhoneNumber = "456-789-0123" },
+ new EmployeeData { EmployeeID = 4, FirstName = "Sophia", LastName = "Brown", Department = "Finance", Email = "sophia.brown@example.com", PhoneNumber = "321-654-0987" },
+ new EmployeeData { EmployeeID = 5, FirstName = "James", LastName = "Wilson", Department = "IT", Email = "james.wilson@example.com", PhoneNumber = "654-321-7654" },
+ new EmployeeData { EmployeeID = 6, FirstName = "Emma", LastName = "Taylor", Department = "Operations", Email = "emma.taylor@example.com", PhoneNumber = "213-546-8790" },
+ new EmployeeData { EmployeeID = 7, FirstName = "Daniel", LastName = "Anderson", Department = "Logistics", Email = "daniel.anderson@example.com", PhoneNumber = "789-654-3210" },
+ new EmployeeData { EmployeeID = 8, FirstName = "Olivia", LastName = "Thomas", Department = "Procurement", Email = "olivia.thomas@example.com", PhoneNumber = "567-890-1234" },
+ new EmployeeData { EmployeeID = 9, FirstName = "Michael", LastName = "Harris", Department = "R&D", Email = "michael.harris@example.com", PhoneNumber = "890-123-4567" },
+ new EmployeeData { EmployeeID = 10, FirstName = "Lucas", LastName = "Martin", Department = "Customer Service", Email = "lucas.martin@example.com", PhoneNumber = "345-678-9012" },
+ };
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**7. Create an API controller**
+
+Create an API controller (aka, **GridController.cs and EmployeesController.cs**) file under **Controllers** folder that helps to establish data communication with the Grid.
+
+ * The **GetOrderData** method retrieves sample order data. Replace it with your custom logic to fetch data from a database or other sources.
+ * The **GetEmployeeDetails** method retrieves sample employee data. Replace it with your custom logic to fetch data from a database or other sources.
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+
+using EditTemplate.Models;
+using Microsoft.AspNetCore.Mvc;
+using Syncfusion.Blazor;
+using Syncfusion.Blazor.Data;
+
+namespace EditTemplate.Controllers
+{
+ [ApiController]
+ [Route("api/[controller]")]
+ public class GridController : ControllerBase
+ {
+ ///
+ /// Retrieves the list of orders.
+ ///
+ /// Retrieve data from the data source.
+ [HttpGet]
+ public List GetOrdersDetails()
+ {
+ return OrdersDetails.GetAllRecords().ToList();
+ }
+
+ ///
+ /// Handles server-side paging and returns the processed data.
+ ///
+ /// Returns the paged data and total record count in result and count format.
+ [HttpPost]
+ public object Post([FromBody] DataManagerRequest DataManagerRequest)
+ {
+ // Retrieve data source and convert to queryable.
+ IQueryable DataSource = GetOrdersDetails().AsQueryable();
+
+ // Get the total records count.
+ int totalRecordsCount = DataSource.Count();
+
+ // Handling Paging in UrlAdaptor.
+ if (DataManagerRequest.Skip != 0)
+ {
+ DataSource = DataOperations.PerformSkip(DataSource, DataManagerRequest.Skip);
+ //Add custom logic here if needed and remove above method.
+ }
+ if (DataManagerRequest.Take != 0)
+ {
+ DataSource = DataOperations.PerformTake(DataSource, DataManagerRequest.Take);
+ //Add custom logic here if needed and remove above method.
+ }
+ // Get total records count.
+ int totalRecordsCount = DataSource.Count();
+
+ // Return data and count.
+ return new { result = DataSource, count = totalRecordsCount };
+ }
+
+ ///
+ /// Inserts a new data item into the data collection.
+ ///
+ /// It contains the new record detail which is need to be inserted.
+ /// Returns void.
+ [HttpPost("Insert")]
+ public void Insert([FromBody] CRUDModel newRecord)
+ {
+ if (newRecord.value != null)
+ {
+ // Add the new record to the data collection.
+ OrdersDetails.GetAllRecords().Insert(0, newRecord.value);
+ }
+ }
+
+ ///
+ /// Update a existing data item from the data collection.
+ ///
+ /// It contains the updated record detail which is need to be updated.
+ /// Returns void.
+ [HttpPost("Update")]
+ public void Update([FromBody] CRUDModel updatedRecord)
+ {
+ var updatedOrder = updatedRecord.value;
+ if (updatedOrder != null)
+ {
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == updatedOrder.OrderID);
+ if (data != null)
+ {
+ // Update the existing record.
+ data.OrderID = updatedOrder.OrderID;
+ data.CustomerID = updatedOrder.CustomerID;
+ data.EmployeeID = updatedOrder.EmployeeID;
+ data.ShipCountry = updatedOrder.ShipCountry;
+ // Update other properties similarly.
+ }
+ }
+ }
+
+ ///
+ /// Remove a specific data item from the data collection.
+ ///
+ /// It contains the specific record detail which is need to be removed.
+ /// Returns void.
+ [HttpPost("Remove")]
+ public void Remove([FromBody] CRUDModel deletedRecord)
+ {
+ // Get the key value from the deletedRecord.
+ int orderId = int.Parse(deletedRecord.key.ToString());
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(OrdersDetails => OrdersDetails.OrderID == orderId);
+ if (data != null)
+ {
+ // Remove the record from the data collection.
+ OrdersDetails.GetAllRecords().Remove(data);
+ }
+ }
+
+ public class CRUDModel where T : class
+ {
+ public string? action { get; set; }
+ public string? keyColumn { get; set; }
+ public object? key { get; set; }
+ public T? value { get; set; }
+ public List? added { get; set; }
+ public List? changed { get; set; }
+ public List? deleted { get; set; }
+ public IDictionary? @params { get; set; }
+ }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="EmployeesController.cs" %}
+
+using EditTemplate.Models;
+using Microsoft.AspNetCore.Mvc;
+using Syncfusion.Blazor;
+
+namespace EditTemplate.Controllers
+{
+ [ApiController]
+ public class EmployeesController : ControllerBase
+ {
+ ///
+ /// Retrieves all employee data from the data source.
+ ///
+ /// Returns the full list of employee data.
+ [HttpGet]
+ [Route("api/[controller]")]
+ public List GetEmployeeDetails()
+ {
+ var data = EmployeeData.GetAllRecords().ToList();
+ return data;
+ }
+
+ ///
+ /// Returns all employee data for the POST request.
+ ///
+ /// Returns the full employee data as an IQueryable collection.
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post([FromBody] DataManagerRequest DataManagerRequest)
+ {
+ // Retrieve data from the data source (e.g., database).
+ IQueryable DataSource = GetEmployeeDetails().AsQueryable();
+ return DataSource;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**8. Add Grid, AutoComplete and configure with server**
+
+To implement a Grid with an editable foreign key column using **AutoComplete** with remote data, add the following code to the **Home.razor** file:
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Data
+@using EditTemplate.Models
+@using Syncfusion.Blazor.DropDowns
+
+
+
+ //Use remote server host number instead ****.
+
+
+
+
+
+
+
+
+
+ @{
+ var data = context as OrdersDetails;
+ }
+
+ //Use remote server host number instead ****.
+
+
+
+
+
+
+
+
+
+@code {
+
+ public class OrdersDetails
+ {
+ public int? OrderID { get; set; }
+ public int? EmployeeID { get; set; }
+ public string? ShipCountry { get; set; }
+ public string? ShipName { get; set; }
+ }
+
+ public class EmployeeData
+ {
+ public int EmployeeID { get; set; }
+ public string FirstName { get; set; }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+**5. Run the application**
+
+When you run the application, the Grid will display data fetched from the API.
+
+
diff --git a/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md b/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md
new file mode 100644
index 0000000000..bae602dc4c
--- /dev/null
+++ b/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md
@@ -0,0 +1,157 @@
+---
+layout: post
+title: Send context as parameters from events in Blazor DataGrid | Syncfusion
+description: Checkout the documentation for sending context as additional parameters from events in Blazor DataGrid in Visual Side using .NET CLI and much more.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# Sending context as additional parameters from events in Blazor DataGrid
+
+The Syncfusion Blazor DataGrid offers flexibility to pass additional context information during events. This capability is especially useful for dynamically updating Grid data based on interactions with other components, enabling seamless, real-time data modifications within the Grid.
+
+To implement this, follow these steps:
+
+ 1. Place the [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app) inside the Grid's `GridEditSettings.Template` to customize the edit form.
+
+ 2. Bind the ComboBox’s `ValueChange` event to a handler method.
+
+ 3. The method receives two parameters:
+
+ * **args**: The event arguments containing the new `ComboBox` value and selected item.
+
+ * **Context**: The current row data is referenced by the variable **Order**, which is cast from the template’s context object as **Order**.
+
+ 4. Within the event handler, you can update properties of the current row, such as **ShipCity**, **ShipCountry** based on the selected `ComboBox` value. The Grid is directly bound to the data object, so changes made to this object are immediately reflected in the Grid UI.
+
+The following example demonstrates this approach:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Inputs
+@using System.Collections.Generic
+
+
+
+
+ @{
+ var order = context as Order;
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+
+ public List Customers = new()
+ {
+ new Customer { CustomerID = "ALFKI", CustomerName = "Alfreds Futterkiste" },
+ new Customer { CustomerID = "ANATR", CustomerName = "Ana Trujillo Emparedados" },
+ new Customer { CustomerID = "ANTON", CustomerName = "Antonio Moreno" },
+ new Customer { CustomerID = "AROUT", CustomerName = "Around the Horn" },
+ new Customer { CustomerID = "BERGS", CustomerName = "Berglunds snabbköp" }
+ };
+
+ public List Orders { get; set; } = new()
+ {
+ new Order { OrderID = 1001, CustomerID = "ALFKI", EmployeeID = 1, ShipCity = "Berlin", ShipCountry = "Germany" },
+ new Order { OrderID = 1002, CustomerID = "ANATR", EmployeeID = 2, ShipCity = "Mexico D.F.", ShipCountry = "Mexico" },
+ new Order { OrderID = 1003, CustomerID = "ANTON", EmployeeID = 3, ShipCity = "Madrid", ShipCountry = "Spain" },
+ new Order { OrderID = 1004, CustomerID = "AROUT", EmployeeID = 4, ShipCity = "London", ShipCountry = "UK" },
+ new Order { OrderID = 1005, CustomerID = "ALFKI", EmployeeID = 1, ShipCity = "Berlin", ShipCountry = "Germany" },
+ new Order { OrderID = 1006, CustomerID = "ANATR", EmployeeID = 2, ShipCity = "Mexico D.F.", ShipCountry = "Mexico" },
+ new Order { OrderID = 1007, CustomerID = "ANTON", EmployeeID = 3, ShipCity = "Madrid", ShipCountry = "Spain" },
+ new Order { OrderID = 1008, CustomerID = "AROUT", EmployeeID = 4, ShipCity = "London", ShipCountry = "UK" },
+ new Order { OrderID = 1009, CustomerID = "ALFKI", EmployeeID = 1, ShipCity = "Berlin", ShipCountry = "Germany" },
+ new Order { OrderID = 1010, CustomerID = "ANATR", EmployeeID = 2, ShipCity = "Mexico D.F.", ShipCountry = "Mexico" },
+ new Order { OrderID = 1011, CustomerID = "ANTON", EmployeeID = 3, ShipCity = "Madrid", ShipCountry = "Spain" },
+ new Order { OrderID = 1012, CustomerID = "AROUT", EmployeeID = 4, ShipCity = "London", ShipCountry = "UK" },
+ new Order { OrderID = 1013, CustomerID = "ALFKI", EmployeeID = 1, ShipCity = "Berlin", ShipCountry = "Germany" },
+ new Order { OrderID = 1014, CustomerID = "ANATR", EmployeeID = 2, ShipCity = "Mexico D.F.", ShipCountry = "Mexico" },
+ new Order { OrderID = 1015, CustomerID = "ANTON", EmployeeID = 3, ShipCity = "Madrid", ShipCountry = "Spain" }
+ };
+
+ private void OnCustomerChange(ChangeEventArgs args, Order order)
+ {
+ if (args.ItemData != null)
+ {
+ Grid.PreventRender(false);
+ switch (args.ItemData.CustomerID)
+ {
+ case "ALFKI":
+ order.ShipCity = "Berlin";
+ order.ShipCountry = "Germany";
+ break;
+ case "ANATR":
+ order.ShipCity = "Mexico D.F.";
+ order.ShipCountry = "Mexico";
+ break;
+ case "ANTON":
+ order.ShipCity = "Madrid";
+ order.ShipCountry = "Spain";
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ public class Order
+ {
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ }
+
+ public class Customer
+ {
+ public string CustomerID { get; set; }
+ public string CustomerName { get; set; }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVoXHDepIVbDBhd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
diff --git a/blazor/datagrid/images/edit-template.gif b/blazor/datagrid/images/edit-template.gif
new file mode 100644
index 0000000000..e9678c6092
Binary files /dev/null and b/blazor/datagrid/images/edit-template.gif differ
diff --git a/blazor/datagrid/images/signalR.gif b/blazor/datagrid/images/signalR.gif
new file mode 100644
index 0000000000..2b7a1274da
Binary files /dev/null and b/blazor/datagrid/images/signalR.gif differ
diff --git a/blazor/datagrid/in-line-editing.md b/blazor/datagrid/in-line-editing.md
index c23cd8a30d..6a9afc446e 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" %}
@@ -621,7 +621,7 @@ To delete multiple selected records in the grid, first you need to select multip
-
+
@@ -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" %}
@@ -700,9 +700,9 @@ You can delete multiple rows programmatically by using [DeleteRecordAsync](https
@using Syncfusion.Blazor.Buttons
-
+
-
+
@@ -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 Blazor DataGrid
-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,11 +864,11 @@ 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.
## Saving a new row at a particular index
-By default, when a new row is added to the Syncfusion Blazor DataGrid, it is inserted and saved at the top of the Grid’s data source. However, certain use cases may require saving the newly added row at a different position—for example, at the end of the current page or a custom index based on business logic.
+By default, when a new row is added to the Syncfusion Blazor DataGrid, it is inserted and saved at the top of the Grid’s data source. However, certain use cases may require saving the newly added row at a different position. For example, at the end of the current page or a custom index based on business logic.
To achieve this customization, the `args.Index` property can be set during the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event of the Grid. This allows the developer to define the exact position where the new row should be saved in the underlying data source.
@@ -927,11 +927,11 @@ The following sample code demonstrates changing the save index of the new row th
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDByNfVYAhjTFmxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Show add new row always in grid
+## Show add new row always in Blazor DataGrid
-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 Blazor DataGrid 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" %}
@@ -996,22 +996,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" %}
@@ -1038,18 +1037,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();
@@ -1094,11 +1095,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" %}
@@ -1129,7 +1130,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();
@@ -1174,16 +1177,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.
@@ -1265,4 +1268,4 @@ public class OrderDetails
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthINCtgBmWlAIwy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthINCtgBmWlAIwy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
diff --git a/blazor/datagrid/persisting-data-in-server.md b/blazor/datagrid/persisting-data-in-server.md
new file mode 100644
index 0000000000..cee7dd52e2
--- /dev/null
+++ b/blazor/datagrid/persisting-data-in-server.md
@@ -0,0 +1,42 @@
+---
+layout: post
+title: Persisting data in the server in Blazor DataGrid | Syncfusion
+description: Learn how to persist data in the server using the Syncfusion Blazor DataGrid, including supported adaptors and integration with RESTful services.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# Persisting data in the server in Blazor DataGrid
+
+The Syncfusion Blazor DataGrid enables you to persist data changes made in the Grid to a server or database using RESTful web services. All CRUD (Create, read, update, and delete) operations performed in the Grid are managed by the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which can bind to server-side data sources and synchronize updates with the backend. This ensures that any changes made in the UI are reliably saved to your data store.
+
+> The [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) persists data in the server according to the **OData** protocol.
+
+Syncfusion provides multiple adaptors to handle different server protocols and APIs, enabling smooth integration with RESTful services. Below are the various adaptors you can use to persist data in the Grid.
+
+**Using UrlAdaptor**
+
+The [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) is the default adaptor for connecting the Syncfusion Blazor DataGrid to remote data services via URLs. It enables seamless data binding and interaction with custom APIs or any remote service that exposes endpoints for CRUD operations. Use the `UrlAdaptor` when your API has custom logic for handling data operations.
+
+For more information, see the [UrlAdaptor documentation](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor).
+
+**Using ODataV4Adaptor**
+
+The [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) allows the Syncfusion Blazor DataGrid to integrate with OData V4 services, supporting efficient data querying and manipulation. You can perform CRUD operations using the `ODataV4Adaptor` to ensure compatibility with OData-compliant backend.
+
+For more information, see the [ODataV4Adaptor documentation](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/odatav4-adaptor).
+
+**Using WebApiAdaptor**
+
+The [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is designed for use with Web APIs that follow the **OData** protocol. It extends the capabilities of the `ODataAdaptor` and enables smooth communication between the Grid and OData-based Web APIs for data retrieval and updates.
+
+For more information, see the [WebApiAdaptor documentation](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/web-api-adaptor).
+
+**Using GraphQLAdaptor**
+
+GraphQL is a powerful query language for APIs designed to provide a more efficient alternative to traditional REST APIs. It allows you to precisely fetch the data you need, reducing over-fetching and under-fetching of data. GraphQL offers a flexible and expressive syntax for querying, enabling clients to request only the specific data they require.
+
+The [GraphQLAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#graphql-service-binding) simplifies the interaction between the Syncfusion Blazor DataGrid and GraphQL servers, allowing for efficient data retrieval with support for various operations such as CRUD (Create, Read, Update, and Delete).
+
+For more information, see the [GraphQLAdaptor documentation](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/graphql-adaptor).
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-dialog.png b/blazor/file-manager/images/blazor-filemanager-custom-dialog.png
new file mode 100644
index 0000000000..fdd14b292e
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-dialog.png differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-layout.png b/blazor/file-manager/images/blazor-filemanager-custom-layout.png
new file mode 100644
index 0000000000..8543c3b32c
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-layout.png differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-selected-items.png b/blazor/file-manager/images/blazor-filemanager-custom-selected-items.png
new file mode 100644
index 0000000000..283883b6b6
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-selected-items.png differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-thumbnail.png b/blazor/file-manager/images/blazor-filemanager-custom-thumbnail.png
new file mode 100644
index 0000000000..28aad486d3
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-thumbnail.png differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-toolbar.png b/blazor/file-manager/images/blazor-filemanager-custom-toolbar.png
new file mode 100644
index 0000000000..25535cf470
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-toolbar.png differ
diff --git a/blazor/file-manager/images/blazor-filemanager-customized-navigation-pane.png b/blazor/file-manager/images/blazor-filemanager-customized-navigation-pane.png
new file mode 100644
index 0000000000..0e2400c966
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-customized-navigation-pane.png differ
diff --git a/blazor/file-manager/styles.md b/blazor/file-manager/styles.md
new file mode 100644
index 0000000000..8570f48a7b
--- /dev/null
+++ b/blazor/file-manager/styles.md
@@ -0,0 +1,192 @@
+---
+layout: post
+title: Styles and Appearance in Blazor File Manager Component | Syncfusion
+description: Checkout and learn here all about styles and appearance in Syncfusion Blazor File Manager component and more.
+platform: Blazor
+control: File Manager
+documentation: ug
+---
+
+# Styles and Appearance in Blazor File Manager Component
+
+The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+
+## Customizing the File Manager navigation pane
+
+To customize the File Manager navigation pane, use the `.e-navigation` selector and apply styles.
+
+```css
+
+/* Set background color for the File Manager navigation pane */
+.e-filemanager .e-navigation {
+ background: #3a0647;
+}
+
+/* Highlight the active item in the TreeView inside the navigation pane */
+.e-filemanager .e-treeview .e-list-item.e-active > .e-fullrow {
+ background: #c3d3f9a1;
+}
+
+/* Set text color for TreeView items in the navigation pane */
+.e-filemanager .e-treeview .e-list-text {
+ color: #fff;
+}
+
+/* Set icon color for collapsible and expandable TreeView nodes */
+.e-treeview .e-icon-collapsible,
+.e-treeview .e-icon-expandable {
+ color: #fff;
+}
+
+```
+
+
+
+## Customizing the File Manager thumbnail
+
+To customize the thumbnails in the File Manager, you can apply background-image styles to specific CSS selectors that represent different file types, as listed in the table below.
+
+|File Type|CSS Selector|
+|----|----|
+|Image|.e-fe-image|
+|Music|.e-fe-music|
+|Excel|.e-fe-xlsx|
+|Video|.e-fe-video|
+|PowerPoint|.e-fe-pptx|
+|RAR|.e-fe-rar|
+|ZIP|.e-fe-zip|
+|Text|.e-fe-txt|
+|JavaScript|.e-fe-js|
+|CSS|.e-fe-css|
+|HTML|.e-fe-html|
+|Unknown|.e-fe-unknown|
+|Executable|.e-fe-exe|
+|MSI|.e-fe-msi|
+|PHP|.e-fe-php|
+|Word|.e-fe-doc|
+|Word(docx)|.e-fe-docx|
+|XML|.e-fe-xml|
+|Folder|.e-fe-folder|
+
+The following example demonstrates how to customize the File Manager's thumbnail icon for folders:
+
+```css
+
+/* Applies to both Large Icons view and Details view in the File Manager */
+
+.e-filemanager .e-large-icons .e-fe-folder, .e-filemanager .e-grid .e-fe-folder {
+ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik0yOS41LDI3LjVoLTI3Yy0xLjEsMC0yLTAuOS0yLTJ2LTE5YzAtMS4xLDAuOS0yLDItMmgxMC40bDMuNSwzLjFoMTMuMmMxLjEsMCwyLDAuOSwyLDJ2MTUuOUMzMS41LDI2LjYsMzAuNiwyNy41LDI5LjUsMjcuNXoiLz48cGF0aCBjbGFzcz0ic3Q0IiBkPSJNMjkuNSwyOGgtMjdDMS4xLDI4LDAsMjYuOSwwLDI1LjV2LTE5QzAsNS4xLDEuMSw0LDIuNSw0aDEwLjZsMy41LDMuMWgxM2MxLjQsMCwyLjUsMS4xLDIuNSwyLjV2MTUuOUMzMiwyNi45LDMwLjksMjgsMjkuNSwyOHogTTIuNSw1QzEuNyw1LDEsNS43LDEsNi41djE5QzEsMjYuMywxLjcsMjcsMi41LDI3aDI3YzAuOCwwLDEuNS0wLjcsMS41LTEuNVY5LjZjMC0wLjgtMC43LTEuNS0xLjUtMS41SDE2LjJMMTIuNyw1SDIuNXoiLz48L2c+PC9zdmc+");
+}
+
+```
+
+
+
+## Customizing the File Manager layout
+
+To customize the File Manager layout, use the `.e-layout-content` selector and apply styles.
+
+```css
+
+/* Style for breadcrumb (address bar) */
+.e-filemanager .e-layout-content .e-address {
+ background: #dee2e6;
+}
+
+/* Customize the background for the Large Icons view */
+.e-filemanager .e-layout-content .e-large-icons {
+ background: #f8f9fa;
+}
+
+/* Customize the background for the Details view table and content area */
+.e-filemanager .e-layout-content .e-grid .e-table,
+.e-filemanager .e-grid .e-gridcontent .e-content {
+ background: #f8f9fa;
+}
+
+```
+
+
+
+## Customizing the File Manager Toolbar
+
+To customize the File Manager toolbar items, use the `.e-toolbar` selector and apply styles.
+
+```css
+
+/* Style for individual toolbar buttons */
+.e-filemanager .e-toolbar .e-tbar-btn {
+ background: #0d9cf6;
+ border: 1px solid #000000;
+}
+
+/* Style for toolbar icons */
+.e-filemanager .e-toolbar .e-tbar-btn .e-icons {
+ color: #ffffff;
+}
+
+/* Style for toolbar button text */
+.e-filemanager .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
+ color: #ffffff;
+}
+
+```
+
+
+
+## Customizing the File Manager selected files/folders
+
+To customize the File Manager selected files/folders, use the below selectors and apply styles.
+
+```css
+
+/* Highlight for active and hover item in Large Icons view */
+.e-filemanager li.e-list-item.e-large-icon.e-active,
+.e-filemanager li.e-list-item.e-large-icon.e-active:hover {
+ background: #dee2e6;
+ border: 2px solid #000000;
+ border-radius: 10%;
+}
+
+/* Color for text */
+.e-filemanager .e-large-icons .e-active {
+ color: #212529;
+}
+
+/* Highlight for active row in Details view */
+.e-filemanager .e-grid td.e-active {
+ background: #dee2e6;
+}
+
+```
+
+
+
+## Customizing the File Manager Dialog
+
+To customize the dialog popup in the File Manager, you can apply styles to specific CSS selectors, as listed in the table below.
+
+|Element|CSS Selector|
+|---------|------------|
+|Header|`.e-dlg-header-content`|
+|Content|`.e-dlg-content`|
+|Overlay|`.e-dlg-overlay`|
+|Footer|`.e-footer-content`|
+
+In this example, we have applied styles to the header content.
+
+```css
+
+/* For File Manager Dialog header */
+.e-filemanager .e-dialog .e-dlg-header-content {
+ background-color: #0d6efd;
+}
+/* For File Manager Dialog header close icon and text*/
+.e-filemanager .e-dialog .e-icon-dlg-close,
+.e-filemanager .e-dialog .e-dlg-header {
+ color: #fff;
+}
+
+```
+
+
\ No newline at end of file
diff --git a/blazor/getting-started/blazor-single-nuget.md b/blazor/getting-started/blazor-single-nuget.md
index 7498b5ec46..08c07de6bb 100644
--- a/blazor/getting-started/blazor-single-nuget.md
+++ b/blazor/getting-started/blazor-single-nuget.md
@@ -9,7 +9,7 @@ documentation: ug
# Getting started with Blazor Component using Syncfusion.Blazor NuGet
-This section briefly explains how to include a Blazor component with the Syncfusion.Blazor Single NuGet package in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
+This section briefly explains how to include a Blazor component with the Syncfusion.Blazor Single NuGet package in your Blazor Server App and Blazor WebAssembly Standalone App using Visual Studio.
## Prerequisites
@@ -17,7 +17,7 @@ This section briefly explains how to include a Blazor component with the Syncfus
## Create a new Blazor App in Visual Studio
-You can create a **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App (Server Interactive Mode) or WebAssembly Standalone**using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
## Install Syncfusion® Blazor Single NuGet in the App
@@ -35,7 +35,7 @@ N> Syncfusion® Blazor components are availa
## Register Syncfusion® Blazor Service
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
+Open **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
```cshtml
@@ -44,7 +44,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
```
-Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App or Blazor WebAssembly App.
+Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebApp Server Interactive Mode or WebAssembly Standalone app.
{% tabs %}
{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %}
@@ -87,11 +87,10 @@ await builder.Build().RunAsync();
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows:
-* For **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file.
-* For **.NET 7** Blazor Server app, include it in the **~/Pages/_Host.cshtml** file.
+* For **.NET 8 and .NET 9 WebAssembly Standalone app** , include it in **wwwroot/index.html** file.
-* For Blazor WebAssembly app, include it in the **~/index.html** file.
+* For **.NET 8 and .NET 9 Blazor WebApp Server Interactive Mode**, include it in **~/Components/App.razor**.
```html
@@ -105,7 +104,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
## Add Syncfusion® Blazor component
-* Now, add the Syncfusion® Blazor Calendar component in the **~/Pages/Index.razor** file.
+* Now, add the Syncfusion® Blazor Calendar component in the **~/Components/Pages/Index.razor** file.
{% tabs %}
{% highlight razor %}
diff --git a/blazor/getting-started/razor-class-library.md b/blazor/getting-started/razor-class-library.md
index 19ce2f2930..a62559bcf6 100644
--- a/blazor/getting-started/razor-class-library.md
+++ b/blazor/getting-started/razor-class-library.md
@@ -73,8 +73,6 @@ This Blazor component is defined in the RazorClassLibrary packa
* Refer to the [Blazor Tooling documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) to create a new **Blazor Web App** using Visual Studio.
-* Refer to the [Blazor Tooling documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=windows) to create a new **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio.
-
{% endtabcontent %}
{% tabcontent Visual Studio Code %}
@@ -185,18 +183,16 @@ You can create a **Blazor Web App** or **Blazor Server App** or **Blazor WebAsse
```
-3. For Blazor Web App, include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file:
-
- * For Blazor WebAssembly app, include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/wwwroot/index.html** file.
+3. Include Stylesheet and Script References Based on Project Type:
- * For **.NET 7** project in Blazor Server App, include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Pages/_Host.cshtml** file.
+ * For Blazor WebAssembly standalone app, include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/wwwroot/index.html** file.
- * For **.NET 6** project in Blazor Server App, include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Pages/_Layout.cshtml** file.
+ * For **.NET 8 and.NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/Pages/App.razor** file.
```html
....
-
+
....
@@ -207,7 +203,7 @@ You can create a **Blazor Web App** or **Blazor Server App** or **Blazor WebAsse
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
-4. Now, add the created custom component in the **~/Pages/.razor** file.
+4. Now, add the created custom component in the **~/Components/Pages/.razor** file.
```cshtml
diff --git a/blazor/ui-kit/overview.md b/blazor/ui-kit/overview.md
index 8a9879fa12..400103181e 100644
--- a/blazor/ui-kit/overview.md
+++ b/blazor/ui-kit/overview.md
@@ -9,7 +9,7 @@ documentation: ug
# Overview: Essential UI Kit for Blazor
-The Essential UI Kit for Blazor comprises over 175 responsive, ready-to-use, easy-to-implement, and customizable blocks designed to help you quickly build web applications. These blocks are developed using HTML (Razor), CSS, C#, and Syncfusion Blazor components, delivering robust functionality and ease of use. They are compatible with both Tailwind CSS and Bootstrap 5.3 CSS frameworks, supporting light and dark modes to offer flexibility and seamless integration across different user preferences. The UI kit includes blocks for the following categories:
+The Essential UI Kit for Blazor comprises over 230 responsive, ready-to-use, easy-to-implement, and customizable blocks designed to help you quickly build web applications. These blocks are developed using HTML (Razor), CSS, C#, and Syncfusion Blazor components, delivering robust functionality and ease of use. They are compatible with both Tailwind CSS and Bootstrap 5.3 CSS frameworks, supporting light and dark modes to offer flexibility and seamless integration across different user preferences. The UI kit includes blocks for the following categories:
@@ -37,19 +37,49 @@ The Essential UI Kit for Blazor comprises over 175 responsive, ready-to-use, eas