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/rthoDoCKTxtufhdP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-> If a template column has a corresponding [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property defined, the value entered in the template column’s input field will be stored in the associated edit column of the row’s data object.
-
-## Event trace while editing
-
-The Syncfusion Blazor DataGrid provides granular control over editing workflows using dedicated events. These events allow you to monitor and customize actions such as editing, adding, deleting, and updating rows.
-
-Each editing operation in the Grid triggers specific events. The following table outlines these events and their descriptions:
-
-| **Event Name** | **Description** |
-|----------------------|---------------------------------------------------------------------------------|
-| [OnBeginEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBeginEdit) | Triggered when the edit operation begins. |
-| [EditCanceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_EditCanceling) | Triggered when an edit operation is being canceled but not yet finalized. |
-| [EditCanceled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_EditCanceled) | Triggered after an edit operation has been canceled. |
-| [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating) | Triggered before a new row is added to the data source. |
-| [RowCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreated) | Triggered after a new row has been added to the data source. |
-| [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating) | Triggered when an existing row is being updated but before changes are applied. |
-| [RowUpdated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdated) | Triggered after an existing row has been successfully updated. |
-| [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting) | Triggered before a row is removed from the data source. |
-| [RowDeleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleted) | Triggered after a row has been removed from the data source. |
-
-The following example demonstrates a sample implementation of editing events in the Grid. It shows how you can track and handle various editing actions using the respective event handlers.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-@page "/"
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Inputs
-
-Current Event: @currentEventMessage
-Previous Event: @previousEventMessage
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code {
- public List Orders { get; set; }
- private string currentEventMessage = "No events triggered yet.";
- private string previousEventMessage = "None";
-
- protected override void OnInitialized()
- {
- Orders = OrderData.GetAllRecords();
- }
-
- private void UpdateEventMessages(string message)
- {
- previousEventMessage = currentEventMessage;
- currentEventMessage = message;
- }
-
- public void HandleBeginEdit(BeginEditArgs args)
- {
- UpdateEventMessages($"BeginEdit Event: Editing row with OrderID = {args.RowData.OrderID}");
- }
-
- public void HandleEditCanceling(EditCancelingEventArgs args)
- {
- UpdateEventMessages($"EditCanceling Event: Canceling edit for row with OrderID = {args.Data.OrderID}");
- }
-
- public void HandleEditCanceled(EditCanceledEventArgs args)
- {
- UpdateEventMessages($"EditCanceled Event: Edit canceled for row with OrderID = {args.Data.OrderID}");
- }
-
- public void HandleRowCreating(RowCreatingEventArgs args)
- {
- UpdateEventMessages("RowCreating Event: A new row is being created.");
- }
-
- public void HandleRowCreated(RowCreatedEventArgs args)
- {
- UpdateEventMessages("RowCreated Event: A new row has been created.");
- }
-
- public void HandleRowUpdating(RowUpdatingEventArgs args)
- {
- UpdateEventMessages($"RowUpdating Event: Updating row with OrderID = {args.Data.OrderID}");
- }
-
- public void HandleRowUpdated(RowUpdatedEventArgs args)
- {
- UpdateEventMessages($"RowUpdated Event: Row updated with OrderID = {args.Data.OrderID}");
- }
-
- public void HandleRowDeleting(RowDeletingEventArgs args)
- {
- UpdateEventMessages($"RowDeleting Event: Deleting row");
- }
-
- public void HandleRowDeleted(RowDeletedEventArgs args)
- {
- UpdateEventMessages($"RowDeleted Event: Row deleted");
- }
-}
-{% 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/BDBTWrDHUvvLUGmg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-## See also
-
-* [Edit one column update the value in another column](https://www.syncfusion.com/forums/151238/edit-one-column-update-the-value-in-another-column)
diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md
index 36b5c2283c..e87c90bf35 100644
--- a/blazor/datagrid/editing.md
+++ b/blazor/datagrid/editing.md
@@ -1,963 +1,1060 @@
---
layout: post
-title: Editing in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Editing in Syncfusion Blazor DataGrid component and much more details.
+title: Editing in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about Editing in Syncfusion Blazor DataGrid and much more details.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Editing in Blazor DataGrid Component
+# Editing in Blazor DataGrid
-The DataGrid component has options to dynamically insert, delete, and update records.
+The Syncfusion Blazor DataGrid provides powerful options for dynamically inserting, deleting, and updating records, enabling you to modify data directly within the Grid. This feature is useful for performing CRUD (Create, Read, Update and Delete) operations seamlessly.
-N> [Editing](https://blazor.syncfusion.com/documentation/datagrid/editing) feature requires a primary key column for CRUD operations.
+To enable editing functionality directly within the Grid, you need to 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 know about editing feature in Blazor DataGrid component, you can check on this video.
+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.
-{% youtube
-"youtube:https://www.youtube.com/watch?v=jOiZpLexDB0"%}
+You can start the edit action either by double-clicking the particular row or by selecting the required row and clicking on the **Edit** button in the toolbar. Similarly, you can add a new record to the Grid either by clicking on the **Add** button in the toolbar or on an external button bound to invoke the [AddRecord](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecord) method of the Grid. **Save** and **Cancel** actions while in edit mode are possible using the respective toolbar icons in the Grid. Deletion of a record is possible by selecting the required row and clicking on the **Delete** button in the toolbar.
-To define the primary key, set [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) to **true** in a particular column whose value is unique.
+To learn about the available edit modes and edit types in the Grid, you can check out this video.
-You can start the edit action either by double-clicking the particular row or by selecting the required row and click on the **Edit** button in the toolbar. Similarly, you can add a new record to DataGrid either by clicking on **Add** button in the toolbar or on an external button which is bound to invoke the [AddRecord](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecord) method of the DataGrid, **Save** and **Cancel** while in edit mode is possible using the respective toolbar icon in DataGrid.
+{% youtube "youtube:https://www.youtube.com/watch?v=jOiZpLexDB0" %}
-Deletion of the record is possible by selecting the required row and click on **Delete** button in the toolbar.
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
-```cshtml
+@page "/"
@using Syncfusion.Blazor.Grids
+@using BlazorApp1.Data
-
-
+
+
-
-
-
-
+
+
+
+
-@code{
- public List Orders { get; set; }
-
+@code {
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ Orders = OrderData.GetAllRecords();
}
}
-```
-
-The following screenshot represents Editing with Default Mode.
-
-
-
-N> * Grid uses `Activator.CreateInstance()` to generate a new record when an insert operation is invoked, so it must have a parameterless constructors defined for the model class and any referenced complex type classes. To provide custom logic for object creation during editing, you can refer [here](#provide-new-item-or-edited-item-using-events).
-
* If [IsIdentity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsIdentity) is enabled, then it will be considered as a read-only column when editing and adding a record.
-
* You can disable editing for a particular column by specifying
-[AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) to **false**.
-
* You can disable adding for a particular column by specifying
-[AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowAdding) to **false**.
-
* You can disable editing of a record on double click by specifying
-[EditSettings.AllowEditOnDblClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowEditOnDblClick) to **false**.
+{% endhighlight %}
-## Toolbar with edit option
-
-The datagrid toolbar has the following built-in items to execute editing actions.
-
-* Add - Adds a new record.
-* Edit - Edits the selected record.
-* Update - Updates the edited record.
-* Delete - Deletes the selected record.
-* Cancel - Cancels the edit state.
+{% highlight c# tabtitle="OrderData.cs" %}
-You can define this by using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
+public class OrderData
+{
+ public static List Orders = new List();
-
-
-
-
-
-
-
-
-
+ public OrderData() { }
-@code{
- public List Orders { get; set; }
+ 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;
+ }
- protected override void OnInitialized()
+ public static List GetAllRecords()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ if (Orders.Count == 0)
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ 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 class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
+ 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; }
}
-```
-The following screenshot represents Toolbar with Edit option.
+{% endhighlight %}
+{% endtabs %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoZysVJpYKYwEU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Default column values on adding new record
+> * 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).
+> * 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.
+> * You can 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**.
+> * You can 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**.
+> * You can 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**.
+> * You can use the **Insert** key to add a new row to the Grid and the **Delete** key to remove the selected row from the Grid.
-The datagrid provides an option to set the default value for the columns when adding a new record in it. To set a default value for a particular column you need to define it in the [DefaultValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DefaultValue) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component.
+## Toolbar with edit option
+
+The toolbar with the edit option feature in the Syncfusion Blazor DataGrid provides a [built-in toolbar](https://blazor.syncfusion.com/documentation/datagrid/toolbar-items#built-in-toolbar-item) that includes various items for executing editing actions. This feature allows you to easily perform edit operations on the Grid data, such as modifying cell values, updating changes, and canceling edits.
+
+To enable this feature, 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. This property allows you to define the items that will be displayed in the Grid toolbar. By including the relevant items like **Edit**, **Add**, **Delete**, **Update**, and **Cancel** within the `Toolbar` property, you can enable the edit options in the toolbar.
-The following sample code demonstrates setting default value as **ANTON** to the **CustomerID** column,
+Here’s an example of how to enable the toolbar with the edit option in the Grid:
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@page "/"
@using Syncfusion.Blazor.Grids
+@using BlazorApp1.Data
-
+
-
-
-
-
+
+
+
+
-@code{
- public List Orders { get; set; }
+@code {
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ Orders = OrderData.GetAllRecords();
}
}
-```
-The following image represents the default value displayed in the **CustomerID** column while adding a new record in DataGrid,
+{% endhighlight %}
-
+{% highlight c# tabtitle="OrderData.cs" %}
-## Disable editing for particular column
-
-You can disable editing for particular columns by setting value as **false** to the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component.
-
-The following sample code demonstrates editing disabled for the **CustomerID** column,
-
-```cshtml
-@using Syncfusion.Blazor.Grids
+namespace BlazorApp1.Data
+{
+ public class OrderData
+ {
+ public static List Orders = new List();
-
-
-
-
-
-
-
-
-
+ public OrderData() { }
-@code{
- public List Orders { get; set; }
+ 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;
+ }
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ public static List GetAllRecords()
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
+ 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 class Order
- {
- public int? OrderID { get; set; }
+ public int OrderID { get; set; }
public string CustomerID { get; set; }
- public DateTime? OrderDate { 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; }
}
}
-```
-N> Similarly [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowAdding) property at the column level helps us to disable the particular column from inserting value to it.
+{% endhighlight %}
+{% endtabs %}
-The following screenshot represents the editing disabled for the **CustomerID** column in DataGrid,
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBIDysApJMqmYgM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+## Disable editing for particular column
-## Disable editing for a particular row or cell
+In the Syncfusion Blazor DataGrid, you have the option to disable editing for a specific column. This feature is useful when you want to prevent editing certain columns, such as those containing calculated values or read-only data.
-Specific rows can be disabled from editing using the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event of the Grid based on the `RequestType` as `BeginEdit`.
+To disable editing for a particular column, you can use 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. By setting this property to **false**, you can prevent editing for that specific column.
-In the following sample, the rows that have the value for the ShipCountry column as "RUSSIA" are prevented from being edited by updating the `Cancel` argument of the `OnActionBegin` event to true.
+> Similarly [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowAdding) property at the column level helps us to disable the particular column from inserting value to it.
-```cshtml
-@using Syncfusion.Blazor.Grids
+Here’s an example that demonstrates how to disable editing for a column in the Grid:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
-
-
-
+@page "/"
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using BlazorApp1.Data
+
+
+