Cell Editing in ASP.NET MVC Data Grid

6 Aug 20267 minutes to read

Cell editing provides a streamlined way to update individual cell values directly within the grid. Cell editing 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 Grid’s overall editing experience.

To enable cell editing in the Data Grid, configure the editSettings->mode property to Cell and allow editing through the editSettings->allowEditing property. This setup provides a seamless inline editing experience, letting users quickly update individual cell values directly within the grid.

@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true"}).Add();
    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true",min=1,max=1000}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("ShipName").HeaderText("Ship Name").Width("150").ValidationRules(new { required = "true"}).Add();
    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").ValidationRules(new { required = "true"}).Add();
}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Cell); }).Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" }).Render()
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

When editing is enabled, it is necessary to set the isPrimaryKey property value to true for the unique column to ensure accurate data updates.

Cancel edit based on condition

The Grid provides the ability to cancel the edit operations for particular cell based on specific conditions. This feature allows controlling whether editing should be allowed or prevented for certain cells in the grid. This functionality is achieved by leveraging the actionBegin event of the Grid component. This event is triggered when a CRUD (Create, Read, Update, Delete) operation is initiated in the grid.

This customization is useful when restricting editing for certain cells, such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the grid.

To cancel the edit operation based on a specific condition, handle the actionBegin event of the Grid component and check the requestType parameter. This parameter indicates the type of action being performed:

Request Type Description
beginEdit Editing an existing record
add Creating a new record
save Updating a new or existing record
delete Deleting an existing record

Apply the desired condition and cancel the operation by setting the args.cancel property to true.

<div style="padding-bottom:20px">
    @Html.EJS().Button("add").Content("Grid is Addable").CssClass("e-primary").Render()
</div>
@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
{
   col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("EmployeeName").HeaderText("Employee Name").Width("150").ValidationRules(new { required = "true"}).Add();
    col.Field("Role").HeaderText("Role").Width("150").ValidationRules(new { required = "true"}).Add();
    col.Field("EmployeeCountry").HeaderText("Employee Country").EditType("dropdownedit").Width("150").ValidationRules(new { required = "true"}).Add();
}).ActionBegin("actionBegin").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Cell); }).Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" }).Render()
<script>
    var isAddable = true;
    function actionBegin(args) {
        if ((args.requestType == 'beginEdit') && (args.rowData['Role'] == 'Admin')) {
                args.cancel = true;
        }
        else if ((args.requestType == 'delete') && (args.data[0]['Role'] == 'Admin')) {
            args.cancel = true;
        }
        else if ((args.requestType == 'add') && (!isAddable)) {
            args.cancel = true;
        }
    }
    document.getElementById('add').onclick = () => {
        var button = document.getElementById('add').ej2_instances[0];
        button.content == 'Grid is Addable' ? (button.content = 'Grid is Not Addable') : (button.content = 'Grid is Addable');
        isAddable = !isAddable;
    };
</script>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

Single-click editing

Enabling single-click editing in the Syncfusion® React Grid’s Cell editing mode is a valuable and intuitive feature that makes a cell editable with just one click. This seamless experience is achieved by using the editCell method for rapid, efficient data modification.

To implement this, bind the onClick event for the grid and, within the event handler, call the editCell method based on the clicked target element. This ensures that the editing mode is triggered when clicking on a specific element within the grid.

@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").AllowPaging().Columns(col => {
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true" }).Add();
    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true", min=3, max=1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("ShipName").HeaderText("Ship Name").Width("150").ValidationRules(new { required = "true" }).Add();
    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").ValidationRules(new { required = "true" }).Add();
}).Created("created").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Cell); }).Toolbar(new List < string > () { "Add", "Delete", "Update", "Cancel" }).Render()
<script>
    function created() {
        var grid = document.getElementById('grid').ej2_instances[0];
        grid.getContentTable().addEventListener('click', function(args) {
            if (args.target.classList.contains('e-rowcell')) {
                grid.editModule.editCell(args.target.closest('tr').rowIndex,
                    grid.getColumnByIndex(parseInt(args.target.getAttribute('aria-colindex')) - 1).field);
            }
        });
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}