Post
Ask Question

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.

  1. $("#jqxgrid").jqxGrid({  
  2.     width: '800px',  
  3.     source: dataAdapter,  
  4.     filterable: true,  
  5.     sortable: true,  
  6.     pageable: true,  
  7.     autorowheight: true,  
  8.     altrows: true,  
  9.     columnsresize: true,  
  10.     columnsreorder: true,  
  11.     pagesize: 50,  
  12.     pagesizeoptions: ['5', '10', '15', '20', '30', '40', '50'],  
  13.     filtermode: 'excel',  
  14.     columns: [{  
  15.         text: 'Supplier Name',  
  16.         cellsalign: 'center',  
  17.         align: 'left',  
  18.         datafield: 'SupplierName',  
  19.         width: 110,  
  20.         "pinned": true  
  21.     }, {  
  22.         text: 'Name',  
  23.         cellsalign: 'center',  
  24.         align: 'center',  
  25.         datafield: 'ProductName',  
  26.         width: 120  
  27.     }, ]  
  28. });  
To disable enter key you need to include the following settings to the grid.
  1. handlekeyboardnavigation: function (event)
  2. {    
  3.    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;    
  4.    if (key == 13)
  5.    {    
  6.       return true;    
  7.    }    
  8. },  
Cool, so now our grid implementation will look like the following.
  1. $("#jqxgrid").jqxGrid({  
  2.     width: '800px',  
  3.     source: dataAdapter,  
  4.     handlekeyboardnavigation: function(event)  
  5.     {  
  6.         var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;  
  7.         if (key == 13)  
  8.         {  
  9.             return true;  
  10.         }  
  11.     },  
  12.     filterable: true,  
  13.     sortable: true,  
  14.     pageable: true,  
  15.     autorowheight: true,  
  16.     altrows: true,  
  17.     columnsresize: true,  
  18.     columnsreorder: true,  
  19.     pagesize: 50,  
  20.     pagesizeoptions: ['5', '10', '15', '20', '30', '40', '50'],  
  21.     filtermode: 'excel',  
  22.     columns: [{  
  23.         text: 'Supplier Name',  
  24.         cellsalign: 'center',  
  25.         align: 'left',  
  26.         datafield: 'SupplierName',  
  27.         width: 110,  
  28.         "pinned": true  
  29.     }, {  
  30.         text: 'Name',  
  31.         cellsalign: 'center',  
  32.         align: 'center',  
  33.         datafield: 'ProductName',  
  34.         width: 120  
  35.     }, ]  
  36. });  
Conclusion

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