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.