Search results

Enable editing in single click in ASP.NET MVC Grid control

14 Apr 2021 / 1 minute to read

Normal Editing

You can make a row editable on a single click with Normal mode of editing in Grid, by using the startEdit and endEdit methods.

Bind the mousedown event for Grid and in the event handler call the startEdit and endEdit, based on the clicked target element.

razor
single-click-normal-edit.cs
Copied to clipboard
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPaging().Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(100).IsPrimaryKey(true).Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width(120).Add();
    col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(120).Format("C2").Add();
    col.Field("ShipCountry").HeaderText("Ship Country").Width(150).Add();
}).Load("load").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()

<script>
    function load(args) {
        var instance = document.getElementById('Grid').ej2_instances[0];
        instance.element.addEventListener('mousedown', function (e) {
            if (e.target.classList.contains("e-rowcell")) {
                if (instance.isEdit)
                    instance.endEdit();
                var index = parseInt(e.target.getAttribute("Index"));
                instance.selectRow(index);
                instance.startEdit();
            };
        });
    }
</script>
Copied to clipboard
public IActionResult Index()
    {
        var Order = OrderDetails.GetAllRecords();
        ViewBag.DataSource = Order;
        return View();
    }

Batch Editing

You can make a cell editable on a single click with Batch mode of editing in Grid, by using the editCell method.

Bind the mousedown event for Grid and in the event handler call the editCell method, based on the clicked target element.

razor
single-click-batch-edit.cs
Copied to clipboard
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPaging().Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(100).IsPrimaryKey(true).Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width(120).Add();
    col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(120).Format("C2").Add();
    col.Field("ShipCountry").HeaderText("Ship Country").Width(150).Add();
}).Load("load").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()

<script>
    function load(args) {
        var instance = document.getElementById('Grid').ej2_instances[0];
        instance.element.addEventListener('mousedown', function (e) {
            if (e.target.classList.contains("e-rowcell")) {
                var index = parseInt(e.target.getAttribute("Index"));
                var colindex = parseInt(e.target.getAttribute("aria-colindex"));
                var field = instance.getColumns()[colindex].field;
                instance.editModule.editCell(index, field);
            };
        });
    }   
</script>
Copied to clipboard
public IActionResult Index()
    {
        var Order = OrderDetails.GetAllRecords();
        ViewBag.DataSource = Order;
        return View();
    }