Search results

Focus the double clicked column in the edit form

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.

razor
focus.cs
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Columns(col =>
{
   col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();

}).AllowPaging().RecordDoubleClick("recordDoubleClick").ActionComplete("ActionComplete").Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()

<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>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}