Introduction

Hi All, I hope you are fine. In this article you will learn how we can disable enter key in JQWidget JQX editable grid. I hope you will like it.

Background

Morning I was working in a grid control which editable, and I selected a row to edit and started editing. I found some issues when I just pressed enter key. So for the time being I thought of disabling enter key while editing. So I thought of sharing those informations with you.

If you are new to JQWidget JQX Grid, please read here: http://sibeeshpassion.com/category/jqwidgets/

Using the code

I hope you know the basics of JQWidget JQX grid. So normally we can create a grid as follows.
[js]
$("#jqxgrid").jqxGrid(
{
width: ‘800px’,
source: dataAdapter,
filterable: true,
sortable: true,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
columnsreorder: true,
pagesize: 50,
pagesizeoptions: [‘5′, ’10’, ’15’, ’20’, ’30’, ’40’, ’50’],
filtermode: ‘excel’,
columns: [
{ text: ‘Supplier Name’, cellsalign: ‘center’, align: ‘left’, datafield: ‘SupplierName’, width: 110 ,"pinned":true},
{ text: ‘Name’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’, width: 120 },
]
});
[/js]

To make this enter key disable you need to include the following settings to the grid.

[js]
handlekeyboardnavigation: function (event) {
var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
if (key == 13) {
return true;
}
},
[/js]

cool, so now our grid implementation will look like this.

[js]
$("#jqxgrid").jqxGrid(
{
width: ‘800px’,
source: dataAdapter,
handlekeyboardnavigation: function (event) {
var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
if (key == 13) {
return true;
}
},
filterable: true,
sortable: true,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
columnsreorder: true,
pagesize: 50,
pagesizeoptions: [‘5′, ’10’, ’15’, ’20’, ’30’, ’40’, ’50’],
filtermode: ‘excel’,
columns: [
{ text: ‘Supplier Name’, cellsalign: ‘center’, align: ‘left’, datafield: ‘SupplierName’, width: 110 ,"pinned":true},
{ text: ‘Name’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’, width: 120 },
]
});
[/js]

Conclusion

I hope you enjoyed reading and found this useful. Please share me your valuable feedback. For me it matters a lot.
Kindest Regards
Sibeesh Venu