How to bind keydown event to element while Editing a record in JavaScript Grid?
This knowledge base explains how to bind Keydown event to form element while editing a record in JavaScript Grid.
Solution
We have achieved this using actionComplete event of ejGrid. In actionComplete event once the edit form is rendered we have bind the keydown event to form elements using on method of jQuery.
The following code example demonstrates how to bind Keydown event to form element while editing a record.
JS
1. Render the Grid
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
actionComplete: "onComplete",
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "CustomerID", headerText: 'Customer ID',width: 90 },
{ field: "EmployeeID", headerText: 'Employee ID', width: 80 },
{ field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" },
{ field: "ShipName", headerText: 'Ship Name', width: 150 },
]
});
});
</script>
MVC
@(Html.EJ().Grid<OrdersView>("Editing")
.Datasource((IEnumerable<object>)ViewBag.dataSource)
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing()})
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90). Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(80).Add(); col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).Format("{0:C}").Add();
col.Field("ShipName").HeaderText("ShipName").Width(150).Add();
})
.ClientSideEvents(eve => { eve.ActionComplete("onComplete; })
)
ASP
<div>
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
<ClientSideEvents ActionComplete="onComplete" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90">
</ej:Column>
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">
</ej:Column>
<ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="80" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}">
</ej:Column>
<ej:Column Field="ShipName" HeaderText="ShipName" Width="150" />
</Columns>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
</ej:Grid> </div>
ASP CORE
<ej-grid id="Grid" allow-paging="true” dataSource="ViewBag.dataSource” action-complete="onComplete">
<e-edit-settings allow-adding="true” allow-editing="true” allow-deleting="true”></ e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string> { "add","edit","delete","update","cancel" })" />
<e-columns>
<e-column field="OrderID" header-text="Order ID" text-align="Right" width="90" is-primary-key="true"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="90" ></e-column>
<e-column field="EmployeeID" header-text="Employee ID" width="80" ></e-column>
<e-column field="Freight" header-text="Freight" text-align="Right” format="{0:C}" width="80" ></e-column>
<e-column field="ShipName" header-text="Ship Name" width="150" ></e-column>
</e-columns>
</ej-grid>
ANGULAR
<ej-grid id="Grid" [allowPaging]="true" [dataSource]="gridData" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" (actionComplete)="onComplete($event)" >
<e-columns>
<e-column field="OrderID" headerText="Order ID" [isPrimaryKey]="true" width="90" textAlign="right"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="90"></e-column>
<e-column field="EmployeeID" headerText="Employee ID" width="80”></e-column>
<e-column field="Freight" width="80" format="{0:C}" textAlign="right"></e-column>
<e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
</e-columns>
</ej-grid>
TS
- In AngularTS, we can bind the keydown event to element using on method in the actionComplete event.
export class GridComponent {
public gridData: any;
public tools;
actionComplete(e:any){
var grid = this.element[0].id;
if(e.requestType == "beginedit"){
setTimeout(function(){
$("#”+grid+“ShipName").on( 'keydown', function(e) { // bound the keyDown event to last editable cell
if( e.which == 9 ) {
var Obj = $("#Grid").ejGrid("instance");
Obj.endEdit(); // called end edit method to save the records
}
});
},0);
} }
2. In actionComplete event ejGrid we check the condition with the requestType as beginedit and we can get all the elements using its Id( gridID + fieldName). Once we get the element we bind the keydown event using on method.
function onComplete(args){
var GridID = this.element[0].id;
if(args.requestType == "beginedit"){
setTimeout(function(){
$("#”+ GridID +“ShipName").on( 'keydown', function(e) { // bound the keyDown event to last editable cell
if( e.which == 9 ) {
var Obj = $("#Grid").ejGrid("instance");
Obj.endEdit(); // called end edit method to save the records
}
});
},0);
}
}
Figure: Editing a record and focus is on last visible editable column. Pressing a tab key will save the edited data.
Conclusion
I hope you enjoyed learning about how to bind keydown event to element while Editing a record in JavaScript Grid.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
