Search results

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

26 Oct 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 mouseup event for Grid and in the event handler call the startEdit and endEdit, based on the clicked target element.

tagHelper
single-click-normal-edit.cs
Copied to clipboard
<ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})" load="load">
    <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Normal"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100" isPrimaryKey="true"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120" format="C2"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
    
<script>
    function load(args) {
        var instance = document.getElementById('Grid').ej2_instances[0];
        instance.element.addEventListener('mouseup', 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();
    }

Open dropdown edit popup on single click

You can open the default dropdown edit popup with single click edit by focusing the dropdown element and calling the EJ2 dropdown list’s showPopup method in the Grid’s actionComplete event. In this demo we have used a global flag variable in the mouseup event to ensure if the dropdown column is the clicked edit target.

tagHelper
open-dropdown-popup.cs
Copied to clipboard
<ejs-grid id="Grid" actionComplete="onActionComplete" dataSource="ViewBag.DataSource" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})" load="load">
    <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Normal"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100" isPrimaryKey="true"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120" format="C2"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
    
<script>
    var isDropdown = false;
    
    function load(args) {
        var instance = document.getElementById('Grid').ej2_instances[0];
        instance.element.addEventListener('mouseup', function (e) {
            if (e.target.classList.contains("e-rowcell")) {
              if (instance.isEdit)
                  instance.endEdit();
              var rowInfo = instance.getRowInfo(e.target);
              if (rowInfo.column.field === "ShipCountry")
                  isDropdown = true;
              instance.selectRow(rowInfo.rowIndex);
              instance.startEdit();
            }
        });
    }  

    function onActionComplete(args) {
        if (args.requestType =="beginEdit" && isDropdown) {
            isDropdown = false;
            var dropdownObj = args.form.querySelector('.e-dropdownlist').ej2_instances[0];
            dropdownObj.element.focus();
            dropdownObj.showPopup();
        }
    }      
</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 mouseup event for Grid and in the event handler call the editCell method, based on the clicked target element.

tagHelper
single-click-batch-edit.cs
Copied to clipboard
<ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})" load="load">
    <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Batch"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100" isPrimaryKey="true"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120" format="C2"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
    
<script>
     function load(args) {
        var instance = document.getElementById('Grid').ej2_instances[0];
        instance.element.addEventListener('mouseup', 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();
    }