Search results

Perform Grid actions by keyboard shortcut keys in ASP.NET Core Grid control

12 Jan 2022 / 1 minute to read

Using keyboard shortcuts, Grid performs navigation and actions.

In addition, You can also perform grid actions with custom keyboard shortcuts. This operation has to be achieved outside of the grid with the help of keydown event.

The following example demonstrates on Adding a new row when Enter key is pressed in the grid.

Copied to clipboard
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
    <e-grid-pagesettings pageCount="5 "></e-grid-pagesettings>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" editType="numericedit" width="150" format="C2"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>


    var grid = document.getElementById("Grid");
    grid.addEventListener("keydown", keyDownHandler);

    function keyDownHandler(e) {
        if (e.keyCode === 13) {
            var gridIns = grid.ej2_instances[0];

Copied to clipboard
public IActionResult Index()
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();