jQuery UI Widgets › Forums › Grid › custom keyboard nav
Tagged: custom, Enter, grid, jqxgrid, keyboard navigation
This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Authorcustom keyboard nav Posts
-
Hi, I am looking for an example to make the enter key behave like the tab key during data entry.
If see how I can trap the keyboard event for the enter key, but don’t know how to tell the grid to save cell and move right.Thanks
Hello dc,
Please, find below an example which shows how to save the cell and select the right cell when you press ‘enter’ key.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> </head> <body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/orders.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' }, { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' }, { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' }, { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' }, { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' }, { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' } ], root: "entry", record: "content", id: 'm\\:properties>d\\:OrderID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source); // create jqxgrid. $("#jqxgrid").jqxGrid( { width: 670, height: 300, source: dataAdapter, editable: true, editmode: 'selectedcell', keyboardnavigation: true, ready: function () { $("#jqxgrid").jqxGrid('selectcell', 0, 'ShipName'); // focus jqxgrid. $("#jqxgrid").jqxGrid('focus'); }, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 250, align: 'left', cellsalign: 'left' }, { text: 'Freight', datafield: 'Freight', width: 80, align: 'right', cellsformat: 'F2', cellsalign: 'right' }, { text: 'Ship Address', datafield: 'ShipAddress', align: 'left', width: 350, cellsalign: 'left' }, { text: 'Ship City', datafield: 'ShipCity', width: 100, align: 'left', cellsalign: 'left' }, { text: 'Ship Country', datafield: 'ShipCountry', align: 'left', cellsalign: 'left' } ], handlekeyboardnavigation: function (event) { var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0; if (key == 13) { var cell = $('#jqxgrid').jqxGrid('getselectedcell'); var row = cell.rowindex; var datafield = cell.datafield; $("#jqxgrid").jqxGrid('endcelledit', row, datafield, false); $('#jqxgrid').jqxGrid('clearselection'); var arr = ["ShipName", "Freight", "ShipAddress", "ShipCity", "ShipCountry"]; for (var i = 0; i < arr.length; i++) { if (arr[i] == datafield) { if (arr[i] == "ShipCountry") { $("#jqxgrid").jqxGrid('selectcell', row + 1, arr[0]); } else { $('#jqxgrid').jqxGrid('selectcell', row, arr[i + 1]); break; } } } return true; } } }); }); </script> <div id='jqxWidget'> <div id='jqxgrid'> </div> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.