From 0ca86c04a76b254a1779052192bb93d8f3bd5a9e Mon Sep 17 00:00:00 2001 From: SanjayKumarSuresh Date: Thu, 10 Sep 2026 20:18:26 +0530 Subject: [PATCH] 1052019: Cell Editing File --- grid-sdk/blazor/data-grid/cell-editing.md | 159 ++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 grid-sdk/blazor/data-grid/cell-editing.md diff --git a/grid-sdk/blazor/data-grid/cell-editing.md b/grid-sdk/blazor/data-grid/cell-editing.md new file mode 100644 index 00000000..afeef6e9 --- /dev/null +++ b/grid-sdk/blazor/data-grid/cell-editing.md @@ -0,0 +1,159 @@ +--- +layout: post +title: Blazor Grid Cell Editing | Syncfusion +description: Learn how to edit grid cells in Blazor Data Grid, customize editing workflows, validate input, manage updates, and control editing behavior. +platform: grid-sdk +control: DataGrid +documentation: ug +--- + +# Cell Editing in Blazor Data Grid + +Cell editing provides a streamlined way to update individual cell values directly within the Data Grid. It is designed for quick, inline modifications, making data entry and corrections more efficient. This approach ensures that changes are applied seamlessly to large datasets while maintaining consistency with the Data Grid's overall editing experience. + +## Enable cell editing + +To enable cell editing in the Data Grid, configure the [GridEditSettings->Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to `EditMode.Cell` and set the [GridEditSettings->AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowEditing) property to `true`. This configuration allows individual cell values to be updated directly within the grid. + + +{% 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 c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails() { } + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return Order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } +} +{% endhighlight %} +{% endtabs %} + +> When editing is enabled, it is necessary to set the [isPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property value to `true` for the unique column to ensure accurate data updates. + + +## Edit on key press + +Edit mode can be activated directly through keyboard input by setting the **AllowEditOnKeyPress** property in [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) to `true`. When enabled, pressing a key while a cell is selected automatically places the cell in edit mode and applies the entered value, eliminating the need for a double-click or explicit edit action. + +{% 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 c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails() { } + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return Order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } +} +{% endhighlight %} +{% endtabs %} + +## See also + +* [Normal editing](./in-line-editing.md) +* [Batch editing](./batch-editing.md) +* [Template editing](./template-editing.md) +* [Validation](./column-validation.md) \ No newline at end of file