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.