How to Disable Enter key in JQWidget JQX Editable Grid

Introduction

In this article you will learn how to disable enter key in JQWidget JQX editable grid. I hope you will like it.

Background

I was working on a grid control which was editable, selected a row to edit, and started editing. I found some issues when I pressed enter key. So for the time being I thought of disabling enter key while editing. Therefore, I decided to share the information with you.

If you are new to JQWidget JQX Grid, please read here.

Using the code

I hope you know the basics of JQWidget JQX grid. So normally we can create a grid as the following.

$("#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
}, ]
});

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

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

Cool, so now our grid implementation will look like the following.

$("#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
}, ]
});

Conclusion

I hope you enjoyed reading and found this useful. Please share me your valuable feedback.