Skip to content

1052019: Cell Editing File #196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sanjaykumar-suresh wants to merge 1 commit into
base: development
Choose a base branch
from
Open

1052019: Cell Editing File #196

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 159 additions & 0 deletions grid-sdk/blazor/data-grid/cell-editing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

<SfGrid DataSource="@OrderData" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="315">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Cell"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true, MinLength=5})" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" ValidationRules="@(new ValidationRules{ Required=true, Min=1, Max=1000})" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
</GridColumns>
</SfGrid>

@code {
public List<OrderDetails> OrderData { get; set; }
protected override void OnInitialized()
{
OrderData = OrderDetails.GetAllRecords();
}
}
{% endhighlight %}
{% highlight c# tabtitle="OrderDetails.cs" %}
public class OrderDetails
{
public static List<OrderDetails> Order = new List<OrderDetails>();
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<OrderDetails> 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

<SfGrid DataSource="@OrderData" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="315">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Cell" AllowEditOnKeyPress="true"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true, MinLength=5})" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" ValidationRules="@(new ValidationRules{ Required=true, Min=1, Max=1000})" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
</GridColumns>
</SfGrid>

@code {
public List<OrderDetails> OrderData { get; set; }
protected override void OnInitialized()
{
OrderData = OrderDetails.GetAllRecords();
}
}
{% endhighlight %}
{% highlight c# tabtitle="OrderDetails.cs" %}
public class OrderDetails
{
public static List<OrderDetails> Order = new List<OrderDetails>();
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<OrderDetails> 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)