Search results

Focus the double clicked column in the edit form

19 Oct 2021 / 1 minute to read

You can focus the double clicked column edit form an through an recordDoubleClick event. With the help of this event you can focus the double clicked column in inline edit mode.

tagHelper
focus.cs
Copied to clipboard
<div id="GridParent">
    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource"  toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" recordDoubleClick="recordDoubleClick" actionComplete="actionComplete" height="315" allowPaging="true">
     <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
        <e-grid-columns>
            <e-grid-column field="OrderID" isPrimaryKey="true" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
            <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>

<script>
    var fieldName;
function recordDoubleClick(e) {
  var clickedColumnIndex = e.cell.getAttribute("aria-colindex");
  fieldName = this.columnModel[parseInt(clickedColumnIndex)].field;
}

function actionComplete(e) {
  if (e.requestType === "beginEdit") {
    // focus the column
    e.form.elements[grid.element.getAttribute("id") + fieldName].focus();
  }
}
</script>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}