diff --git a/grid-sdk/blazor/data-grid/editing.md b/grid-sdk/blazor/data-grid/editing.md index b81077c7..4145a9d2 100644 --- a/grid-sdk/blazor/data-grid/editing.md +++ b/grid-sdk/blazor/data-grid/editing.md @@ -1,23 +1,29 @@ --- layout: post -title: Editing in Blazor DataGrid | Syncfusion® -description: Learn how to configure and customize editing features in the Blazor DataGrid efficiently and much more details. +title: Blazor Grid Editing | Syncfusion +description: Learn how to edit data in Blazor Data Grid using inline, dialog, batch, and command column editing with validation and CRUD operations. platform: grid-sdk control: DataGrid documentation: ug --- -# Editing in Blazor DataGrid +# Editing in Blazor Data Grid -The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides powerful options for dynamically inserting, deleting, and updating records, enabling to modify data directly within the Grid. This feature is useful for performing CRUD (Create, Read, Update and Delete) operations seamlessly. +The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides powerful options for dynamically inserting, deleting, and updating records, enabling data modification directly within the Data Grid. This feature is useful for performing CRUD (Create, Read, Update, Delete) operations seamlessly. -To enable editing functionality directly within the Grid, editing requires configure the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowEditing), [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowAdding), and [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowDeleting) properties within the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) to **true**. +To enable editing within the Data Grid, configure the following [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) properties to **true**: [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowEditing), [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowAdding), and [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowDeleting). + +| Property | Purpose | +|----------|---------| +| `AllowEditing` | Enable editing of existing records | +| `AllowAdding` | Enable adding new records | +| `AllowDeleting` | Enable deleting records | The editing feature requires a primary key column for CRUD operations. To define the primary key, set [Columns.IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) to **true** in the relevant column. Edit actions can be initiated by double-clicking a row or by selecting a row and clicking the **Edit** button in the toolbar. New records can be added by clicking the **Add** button in the toolbar or by invoking the [AddRecord](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecord) method externally. **Save** and **Cancel** actions during edit mode are available through the respective toolbar icons. Records can be deleted by selecting a row and clicking the **Delete** button in the toolbar. -To learn about the available edit modes and edit types in the Grid, editing can be configured to check out this video. +To learn about the available edit modes, edit types in the Data Grid, and how editing can be configured, check out this video. {% youtube "youtube:https://www.youtube.com/watch?v=jOiZpLexDB0" %} @@ -101,19 +107,31 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoZysVJpYKYwEU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrHjcjLLwovaQjg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> * The Grid uses `Activator.CreateInstance()` to generate a new record when an insert operation is invoked, so the model class and any referenced complex type classes must have parameterless constructors defined. To provide custom logic for object creation during editing, refer to [this section](#provide-new-item-or-edited-item-using-events). +> * The Data Grid uses `Activator.CreateInstance()` to generate a new record when an insert operation is invoked. The model class and referenced complex types must have parameterless constructors. +> * To provide custom object-creation logic, handle the [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating) event before the new row is added. > * If [IsIdentity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsIdentity) is enabled, the column will be treated as read-only when editing or adding a record. -> * It is possible to disable editing for a specific column by setting [Columns.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) to **false**. -> * It is possible to disable adding for a particular column by setting [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowAdding) to **false**. -> * It is possible to disable editing of a record on double-click by setting [EditSettings.AllowEditOnDblClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowEditOnDblClick) to **false**. -> * It is possible to use the **Insert** key to add a new row to the Grid and the **Delete** key to remove the selected row from the Grid. +> * To disable editing for a specific column, set [Columns.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) to **false**. +> * To disable adding for a particular column, set [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowAdding) to **false**. +> * To disable editing on double-click, set [EditSettings.AllowEditOnDblClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowEditOnDblClick) to **false**. +> * Use the **Insert** key to add a row and the **Delete** key to remove the selected row. + +## Edit modes + +The Data Grid supports multiple editing options to meet different data-editing requirements: + +- **[Inline edit](./in-line-editing.md)**: Allows direct modification of row or cell values within the grid. +- **[Batch edit](./batch-editing.md)**: Enables editing and saving of multiple cells in a single action. +- **[Cell edit](./cell-editing.md)**: Allows to edit individual cell values directly within the grid. +- **[Dialog edit](./dialog-editing.md)**: Opens a dedicated modal dialog window to edit row data. + +Use the `editSettings.mode` property to specify the desired edit mode. -## Toolbar with edit option +## Edit records using the toolbar -The toolbar editing feature in the Blazor DataGrid provides a [built-in toolbar](https://blazor.syncfusion.com/documentation/datagrid/toolbar-items#built-in-toolbar-item) that includes predefined items for executing editing actions. This functionality enables efficient modification of Grid data, including updating cell values, saving changes, and canceling edits. -To activate this feature, 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. This property defines the items displayed in the Grid toolbar. Including items such as **Edit**, **Add**, **Delete**, **Update**, and **Cancel** within the `Toolbar` property enables the corresponding editing actions. +The toolbar editing feature in the Blazor Data Grid provides a [built-in toolbar](https://blazor.syncfusion.com/documentation/datagrid/toolbar-items#built-in-toolbar-item) that includes predefined items for executing editing actions. This functionality enables efficient modification of Grid data, including updating cell values, saving changes, and canceling edits. +To activate this feature, configure the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property of the Data Grid. This property defines the items displayed in the Data Grid toolbar. Including items such as **Edit**, **Add**, **Delete**, **Update**, and **Cancel** within the `Toolbar` property enables the corresponding editing actions. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -196,11 +214,86 @@ To activate this feature, configure the [Toolbar](https://help.syncfusion.com/cr {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBIDysApJMqmYgM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhHXQNBLwnYkNPH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -## Disable editing for particular column +## Column validation -In the Blazor DataGrid, editing can be selectively disabled for individual columns. This capability is particularly useful for columns that contain calculated values or read-only data. +Column validation rules ensure that edited or newly added row data meets specific criteria before saving. Validation rules enforce constraints on individual columns and maintain data integrity. + +Validation rules are defined using the [GridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property, which specifies rules that validate column values. The validation mechanism uses the built-in `FormValidator` component. + +> Validation in the Data Grid is based on the Microsoft Blazor `EditForm` component. Once a validation message is displayed, the field is revalidated only during form submission or when focus is moved away from the field. Refer to the [Microsoft Validation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation#data-annotations-validator-component-and-custom-validation) documentation for additional details. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code { + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight csharp tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails(int OrderID, string CustomerID, double Freight, string ShipCountry, DateTime OrderDate) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + this.OrderDate = OrderDate; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France", new DateTime(1996, 7, 4))); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany", new DateTime(1996, 7, 5))); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil", new DateTime(1996, 7, 8))); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France", new DateTime(1996, 7, 8))); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium", new DateTime(1996, 7, 9))); + Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil", new DateTime(1996, 7, 10))); + Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland", new DateTime(1996, 7, 11))); + Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland", new DateTime(1996, 7, 12))); + Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil", new DateTime(1996, 7, 15))); + Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela", new DateTime(1996, 7, 16))); + Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria", new DateTime(1996, 7, 17))); + Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico", new DateTime(1996, 7, 18))); + Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany", new DateTime(1996, 7, 19))); + Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil", new DateTime(1996, 7, 19))); + Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA", new DateTime(1996, 7, 22))); + } + return Order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } + public DateTime OrderDate { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhdtQXiTPWUFndp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Disable editing for specific columns + +Disable editing for individual columns using the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) property. This capability is particularly useful for columns that contain calculated values or read-only data. To disable editing for a specific column, configure the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) property of the [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object. Setting this property to **false** prevents editing for the targeted column. > When the [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowAdding) property is configured at the column level, it prevents value insertion into that specific column. @@ -317,15 +410,17 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtByjysAfpJUHTUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLdtwXBVQmmsmEa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} > * When the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is set to **true** for a column, editing is automatically disabled for that column. -> * To disable editing for a specific row, use the [RowEditing](https://blazor.syncfusion.com/documentation/datagrid/events#rowediting) event. +> * To disable editing for a specific row, use the [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing) event. > * To disable editing for a specific cell, use the [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) event. The event triggers when a cell enters edit mode during batch editing, allowing cancellation of editing for that cell based on custom conditions. -## Editing template column +## Customize column editors using templates + +Use [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) to provide custom UI during edit mode. The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property controls normal display. Define custom editing templates for specific columns to integrate custom input controls. -The editing template column feature in the Blazor DataGrid enables the creation of custom editing templates for specific columns. This functionality is particularly beneficial for customizing the editing experience, such as integrating custom input controls or displaying additional contextual information during editing. +`EditTemplate` displays during edit mode; `Template` displays in normal mode. Both templates can be defined for the same column. To enable this functionality, set the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property for the target column in the Grid configuration. The `Field` property associates the column with the corresponding field in the data source, allowing value editing for that field. @@ -345,11 +440,17 @@ To enable this functionality, set the [Field](https://help.syncfusion.com/cr/bla + + @{ + var order = (context as OrderData); + + } + @@ -359,6 +460,7 @@ To enable this functionality, set the [Field](https://help.syncfusion.com/cr/bla @code { public List Orders { get; set; } + public List CountryList = new List { "Argentina", "Brazil", "France", "Germany", "Switzerland" }; protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -421,266 +523,12 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLIDIsKfTIGXHqy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Customize delete confirmation dialog - -The Blazor DataGrid includes a built-in delete confirmation dialog that prompts before removing a record. This confirmation step helps prevent accidental deletions by requiring explicit acknowledgment before the action is completed. - -To enable the default confirmation dialog, set the [ShowDeleteConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowDeleteConfirmDialog) property to **true** in the `GridEditSettings`. This displays a standard dialog when a delete action is triggered. - -The delete confirmation dialog can be customized to modify its appearance, content, and behavior. Properties such as `Header`, `ShowCloseIcon`, and `Height` can be adjusted as needed. - -To fully customize the confirmation dialog, use the [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.RowDeletingEventArgs-1.html) event of the Grid. This event enables cancellation of the default delete action and rendering of a custom dialog using the [SfDialog](https://blazor.syncfusion.com/documentation/dialog/getting-started-with-web-app) component. -To implement a custom delete confirmation dialog: - -- Enable delete functionality by setting [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowDeleting) to **true** in `GridEditSettings`. -- Use an `SfDialog` to define the custom confirmation dialog. -- Handle the [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting) event to cancel the default behavior and display the custom dialog. -- In the dialog’s **OK** button click event, invoke the [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) method to manually delete the selected record. -- In the **Discard** button click event, cancel the delete action by hiding the dialog using a Boolean flag. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@page "/" -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Popups - - - - -
Delete Confirmation Dialog
- - Are you sure you want to delete the selected Record? - - - - - - - - - - - - - - - - - - - -@code { - SfGrid Grid; - SfDialog Dialog; - public List Orders { get; set; } - public object SelectedData; +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVxZvLRVKsKhHvM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} - // Boolean to control the visibility of the dialog. - public bool isDialogVisible { get; set; } = false; - // Flag to prevent multiple dialog triggers. - public bool flag = true; +## Edit enum columns - // Reset the flag when the dialog is closed. - public void Closed() - { - flag = true; - } - - // Trigger the dialog visibility during the delete action. - public void RowDeleting(Syncfusion.Blazor.Grids.RowDeletingEventArgs Args) - { - if (flag) - { - Args.Cancel = true; // Cancel the default delete action. - flag = false; - isDialogVisible = true; // Show the dialog. - } - } - - // Confirm the delete action and delete the record programmatically. - private async Task okClick() - { - await Grid.DeleteRecordAsync(); // Delete the record. - isDialogVisible = false; // Hide the dialog. - } - - // Cancel the delete action and hide the dialog. - private void cancelClick() - { - isDialogVisible = false; // Hide the dialog. - } - - protected override void OnInitialized() - { - Orders = OrderData.GetAllRecords(); - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="OrderData.cs" %} - -public class OrderData -{ - public static List Orders = new List(); - - public OrderData() { } - - public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipName = ShipName; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShippedDate = ShippedDate; - this.IsVerified = IsVerified; - this.ShipCity = ShipCity; - this.ShipCountry = ShipCountry; - this.EmployeeID = employeeID; - } - - public static List GetAllRecords() - { - if (Orders.Count == 0) - { - Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1)); - Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2)); - Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3)); - Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1)); - Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2)); - Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3)); - Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2)); - Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1)); - Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3)); - } - return Orders; - } - - public int OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipName { get; set; } - public double? Freight { get; set; } - public DateTime? OrderDate { get; set; } - public DateTime? ShippedDate { get; set; } - public bool? IsVerified { get; set; } - public string ShipCity { get; set; } - public string ShipCountry { get; set; } - public int EmployeeID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBSXSiUJTudnRLI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Update boolean column value with a single click - -The Blazor DataGrid supports updating boolean column values with a single click in normal editing mode. This feature streamlines the process of toggling boolean values directly within the Grid, improving interaction efficiency. - -This behavior can be achieved using the [column template](https://blazor.syncfusion.com/documentation/datagrid/column-template) feature. The column template allows custom UI elements, such as checkboxes, to be rendered for specific columns. By configuring the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property, a checkbox can be rendered in the desired column, and its change event can be handled to update the value with a single click. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@page "/" -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Buttons -@using Syncfusion.Blazor.Inputs - - - - - - - - - - - - - - - -@code { - public List Orders { get; set; } - - protected override void OnInitialized() - { - Orders = OrderData.GetAllRecords(); - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="OrderData.cs" %} - -public class OrderData -{ - public static List Orders = new List(); - - public OrderData() { } - - public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipName = ShipName; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShippedDate = ShippedDate; - this.IsVerified = IsVerified; - this.ShipCity = ShipCity; - this.ShipCountry = ShipCountry; - this.EmployeeID = employeeID; - } - - public static List GetAllRecords() - { - if (Orders.Count == 0) - { - Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1)); - Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2)); - Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3)); - Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1)); - Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2)); - Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3)); - Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2)); - Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1)); - Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3)); - } - return Orders; - } - - public int OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipName { get; set; } - public double? Freight { get; set; } - public DateTime? OrderDate { get; set; } - public DateTime? ShippedDate { get; set; } - public bool? IsVerified { get; set; } - public string ShipCity { get; set; } - public string ShipCountry { get; set; } - public int EmployeeID { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDreXIsqTejwCyFR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Edit enum column - -The Blazor DataGrid provides a feature for editing enum-type data within a Grid column, making it particularly useful for efficiently managing enumerated list data. +The Blazor Data Grid provides a feature for editing enum-type data within a Data Grid column, making it particularly useful for efficiently managing enumerated list data. In the example below, the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is used within the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) for the **Employee Feedback** column. The enumerated list data is bound to the **Employee Feedback** column using two-way binding (@bind-Value). @@ -700,8 +548,8 @@ In the example below, the [DropDownList](https://blazor.syncfusion.com/documenta @{ - var Order = (context as EmployeeDetails); - + var order = (context as EmployeeDetails); + } @@ -710,8 +558,8 @@ In the example below, the [DropDownList](https://blazor.syncfusion.com/documenta @code{ - SfDropDownList DropDownList; - public List DropDownEnumValue = new List(); + SfDropDownList DropDownList; + public List DropDownEnumValue = new List { Feedback.Positive, Feedback.Negative }; public enum Feedback { Positive = 0, @@ -721,17 +569,10 @@ In the example below, the [DropDownList](https://blazor.syncfusion.com/documenta public class EmployeeDetails { - public int Id { get; set; } - public string CustomerID { get; set; } - public Feedback FeedbackDetails { get; set; } - - } - protected override void OnInitialized() - { - foreach (string item in Enum.GetNames(typeof(Feedback))) - { - DropDownEnumValue.Add(item); - } + public int Id { get; set; } + public string CustomerID { get; set; } + public Feedback FeedbackDetails { get; set; } + } public List Details = Enumerable.Range(1, 8).Select(x => new EmployeeDetails() { @@ -744,12 +585,12 @@ In the example below, the [DropDownList](https://blazor.syncfusion.com/documenta {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVfsihYMwfNqnqV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLnNwtVhbHzRriq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -## Edit complex column +## Edit complex columns -The [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) feature for complex columns in the Blazor DataGrid enables customization of the editing experience when working with nested data structures. Before performing CRUD operations involving complex objects, refer to the [Complex Data Binding](https://blazor.syncfusion.com/documentation/datagrid/column-rendering#complex-data-generation) documentation. -To customize the default EditForm input component, define an `EditTemplate` within the GridColumn for the complex field. Two-way binding (**@bind-Value**) can be used inside the `EditTemplate` to reflect changes in the DataGrid. +The [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) feature for complex columns in the Blazor Data Grid enables customization of the editing experience when working with nested data structures. Before performing CRUD operations involving complex objects, refer to the [Complex Data Binding](https://blazor.syncfusion.com/documentation/datagrid/column-rendering#complex-data-generation) documentation. +To customize the default EditForm input component, define an `EditTemplate` within the GridColumn for the complex field. Two-way binding (**@bind-Value**) can be used inside the `EditTemplate` to reflect changes in the Data Grid. For proper focus management and validation, the `ID` attribute of input elements inside the `EditTemplate` must match the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value of the corresponding GridColumn. When referencing complex fields, use a double underscore **(__)** instead of the dot **(.)** operator. For example, if the field is **Name.FirstName**, the `ID` should be defined as **Name__FirstName**. Ensure that both `ID` and `Name` attributes inside the `EditTemplate` follow the double underscore **(__)** format to avoid issues with validation and focus handling. @@ -770,12 +611,12 @@ In the following example, input elements are rendered in the edit templates of t - + - + @@ -837,12 +678,12 @@ In the following example, input elements are rendered in the edit templates of t {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoZICKzSgNsjJk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrnXcjBVluMfmaP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -## Edit foreign key column +## Edit foreign key columns -The Blazor DataGrid provides advanced editing support for foreign key columns, enhancing the default rendering of the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) during edit operations. This flexibility is particularly beneficial when customizing the editor for foreign key fields. -By default, the Grid renders a `DropDownList` as the editor for foreign key columns. To override this behavior, configure the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the GridColumn. The `EditTemplate` allows specification of a cell edit template, which can be defined using either a template string or an HTML element ID. +The Blazor Data Grid provides advanced editing support for foreign key columns, enhancing the default rendering of the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) during edit operations. This flexibility is particularly beneficial when customizing the editor for foreign key fields. +By default, the Data Grid renders a `DropDownList` as the editor for foreign key columns. To override this behavior, configure the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the GridColumn. The `EditTemplate` allows specification of a cell edit template, which can be defined using either a template string or an HTML element ID. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -857,7 +698,7 @@ By default, the Grid renders a `DropDownList` as the editor for foreign key colu - + @@ -908,12 +749,12 @@ By default, the Grid renders a `DropDownList` as the editor for foreign key colu { Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1)); Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2)); - Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "India", 3)); + Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3)); Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1)); Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2)); Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3)); Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2)); - Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "India", 1)); + Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1)); Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3)); } return Orders; @@ -993,15 +834,274 @@ By default, the Grid renders a `DropDownList` as the editor for foreign key colu {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrfsBZACuuzbDIt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLnXGDVrYWNhyAE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Customizing the delete confirmation dialog + +### Built-in delete confirmation + +The Blazor Data Grid includes a built-in delete confirmation dialog that prompts before removing a record. This confirmation step helps prevent accidental deletions by requiring explicit acknowledgment before the action is completed. + +To enable the default confirmation dialog, set the [ShowDeleteConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowDeleteConfirmDialog) property to **true** in the `GridEditSettings`. This displays a standard dialog when a delete action is triggered. + +Customize the dialog’s appearance, content, and behavior using `SfDialog` properties such as `Header`, `ShowCloseIcon`, and `Height`. + +### Custom delete confirmation + +For full customization, handle the [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting) event to cancel default behavior and render a custom dialog using the [SfDialog](https://blazor.syncfusion.com/documentation/dialog/getting-started-with-web-app) component. +To implement a custom delete confirmation dialog: + +- Enable delete functionality by setting [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowDeleting) to **true** in `GridEditSettings`. +- Use an `SfDialog` to define the custom confirmation dialog. +- Handle the [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting) event to cancel the default behavior and display the custom dialog. +- In the dialog’s **OK** button click event, invoke the [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) method to manually delete the selected record. +- In the **Discard** button click event, cancel the delete action by hiding the dialog using a Boolean flag. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Popups + + + + +
Delete Confirmation Dialog
+ + Are you sure you want to delete the selected Record? + + + + + + + + + + + + + + + + + + + +@code { + SfGrid Grid; + SfDialog Dialog; + public List Orders { get; set; } + public object SelectedData; + + // Boolean to control the visibility of the dialog. + public bool isDialogVisible { get; set; } = false; + + // Flag to prevent multiple dialog triggers. + public bool flag = true; + + // Reset the flag when the dialog is closed. + public void Closed() + { + flag = true; + } + + // Trigger the dialog visibility during the delete action. + public void RowDeleting(Syncfusion.Blazor.Grids.RowDeletingEventArgs Args) + { + if (flag) + { + Args.Cancel = true; // Cancel the default delete action. + flag = false; + isDialogVisible = true; // Show the dialog. + } + } + + // Confirm the delete action and delete the record programmatically. + private async Task okClick() + { + await Grid.DeleteRecordAsync(); // Delete the record. + isDialogVisible = false; // Hide the dialog. + } + + // Cancel the delete action and hide the dialog. + private void cancelClick() + { + isDialogVisible = false; // Hide the dialog. + } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData() { } + + public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipName = ShipName; + this.Freight = Freight; + this.OrderDate = OrderDate; + this.ShippedDate = ShippedDate; + this.IsVerified = IsVerified; + this.ShipCity = ShipCity; + this.ShipCountry = ShipCountry; + this.EmployeeID = employeeID; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1)); + Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2)); + Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3)); + Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1)); + Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2)); + Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3)); + Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2)); + Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1)); + Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3)); + } + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } + public DateTime? OrderDate { get; set; } + public DateTime? ShippedDate { get; set; } + public bool? IsVerified { get; set; } + public string ShipCity { get; set; } + public string ShipCountry { get; set; } + public int EmployeeID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBxZwjLrFSWFKcc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Update boolean column value with a single click + +The Blazor Data Grid supports updating boolean column values with a single click in normal edit mode. Streamline boolean value updates with a single click using a custom checkbox template. + +This behavior can be achieved using the [column template](https://blazor.syncfusion.com/documentation/datagrid/column-template) feature. The column template allows custom UI elements, such as checkboxes, to be rendered for specific columns. By configuring the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property, a checkbox can be rendered in the desired column, and its change event can be handled to update the value with a single click. The `Template` renders the custom checkbox, and its change event updates the value without entering full edit mode. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Inputs + + + + + + + + + + + + + + + +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData() { } + + public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipName = ShipName; + this.Freight = Freight; + this.OrderDate = OrderDate; + this.ShippedDate = ShippedDate; + this.IsVerified = IsVerified; + this.ShipCity = ShipCity; + this.ShipCountry = ShipCountry; + this.EmployeeID = employeeID; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1)); + Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2)); + Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3)); + Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1)); + Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2)); + Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3)); + Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2)); + Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1)); + Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3)); + } + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } + public DateTime? OrderDate { get; set; } + public DateTime? ShippedDate { get; set; } + public bool? IsVerified { get; set; } + public string ShipCity { get; set; } + public string ShipCountry { get; set; } + public int EmployeeID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhdZlhRBDpccjkr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -## How to perform CRUD action externally +## Performing CRUD actions externally -The Blazor DataGrid supports external execution of CRUD (Create, Read, Update, and Delete) operations, allowing manipulation of Grid data outside the Grid interface. This approach is particularly beneficial in scenarios that require programmatic control over data operations. +The Blazor Data Grid supports external execution of CRUD (Create, Read, Update, and Delete) operations, allowing manipulation of Data Grid data outside the Data Grid interface. This approach is particularly beneficial in scenarios that require programmatic control over data operations. -### Using separate toolbar +### Using a separate toolbar -The Blazor DataGrid supports external CRUD operations, enabling efficient data manipulation through a separate toolbar. This capability is particularly beneficial when data operations are managed programmatically outside the Grid's built-in UI. +The Blazor DataGrid supports external CRUD operations, enabling efficient data manipulation through a separate toolbar. This capability is particularly beneficial when data operations are managed programmatically outside the Data Grid's built-in UI. * [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync) - Adds a new record. If no data is passed, the add form is displayed. * [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) - Initiates editing for the selected row. @@ -1009,7 +1109,7 @@ The Blazor DataGrid supports external CRUD operations, enabling efficient data m * [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) - Saves the record if the Grid is in an editable state. * [CloseEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CloseEditAsync) - Cancels the editing state. -The following example demonstrates how the Grid integrates with a separate toolbar to perform external CRUD operations. The toolbar includes buttons for Add, Edit, Delete, Update, and Cancel. +The following example demonstrates how the Data Grid integrates with a separate toolbar to perform external CRUD operations. The toolbar includes buttons for Add, Edit, Delete, Update, and Cancel. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1130,14 +1230,16 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBSZSWKpIfWuqrR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrdZmDLLOrDvDWl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -### Using external form +### Using an external form -The Blazor DataGrid supports editing operations through a custom external form, allowing customization of the editing experience outside the default in-Grid editing interface. +The Blazor Data Grid supports editing operations through a custom external form, allowing customization of the editing experience outside the default in-grid editing interface. To enable external form editing, configure the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event. This event triggers the edit operation when a row is selected, enabling integration with a separate form component. +The first `UpdateRowAsync` argument identifies the row to update. The value must match the selected record's row index, such as `SelectedRowIndex` captured in `RowSelectHandler`. + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1244,6 +1346,7 @@ To enable external form editing, configure the [RowSelected](https://help.syncfu public string ShipCountry { get; set; } } public OrderData SelectedProduct = new OrderData(); + public int SelectedRowIndex; List Dropdown = new List { new Country() { ShipCountry= "France" }, @@ -1255,11 +1358,12 @@ To enable external form editing, configure the [RowSelected](https://help.syncfu async Task Save() { - await this.Grid.UpdateRowAsync(1, SelectedProduct); + await this.Grid.UpdateRowAsync(SelectedRowIndex, SelectedProduct); } public void RowSelectHandler(RowSelectEventArgs args) { SelectedProduct = args.Data; + SelectedRowIndex = args.RowIndex; } protected override void OnInitialized() @@ -1324,17 +1428,14 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBytoiqfIIReUci?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVnXcDrVOUiUMls?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ![Using external form](./images/blazor-datagrid-editing-form.webp) -## Troubleshoot editing works only for first row -Editing operations in the Blazor DataGrid rely on the primary key value of the selected row. If the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is not defined, edit or delete actions will consistently target the first row. To resolve this issue, ensure that the `IsPrimaryKey` property is set to **true** for the column that uniquely identifies each row. - -## How to make a Blazor DataGrid column always editable +## Make a grid column always editable -To configure a Blazor DataGrid column for continuous editing, use the column template feature. This approach is particularly effective for enabling direct editing of specific column values within the Grid. +To configure a Blazor Data Grid column for continuous editing, use the column template feature. This approach is particularly effective for enabling direct editing of specific column values within the Data Grid. In the following example, the [SfTextBox](https://blazor.syncfusion.com/documentation/textbox/getting-started-webapp) component is rendered in the **Freight** column using a column template. Edited changes are saved to the data source using two-way binding (**@bind-Value**) of the `SfTextBox`. {% tabs %} @@ -1349,7 +1450,7 @@ In the following example, the [SfTextBox](https://blazor.syncfusion.com/document - +