jQuery UI Widgets › Forums › Grid › key board navigation to navigate to next row once it reaches last cell
Tagged: grid, handlekeyboardnavigation, jqxgrid, tab
This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 9 years, 8 months ago.
-
Author
-
March 5, 2015 at 7:55 pm key board navigation to navigate to next row once it reaches last cell #68097
Currently we can Navigate to the Last cell in a row using TAB Key.
Once the tab navigation reaches the last cell of the row and when we try to navigating using the TAB Key, grid looses the focus.
How to navigate to the next row once the end of the row is reached.
can you help us how to get it done this.March 6, 2015 at 8:16 am key board navigation to navigate to next row once it reaches last cell #68117Hello hrajusb,
Here is an example which shows how to use ‘handlekeyboardnavigation’ function to go on the next row when the last cell is selected.
<!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 == 9) { 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='jqxgrid'> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/March 6, 2015 at 3:33 pm key board navigation to navigate to next row once it reaches last cell #68141Hi Nadezhda
thanks for the solution, it does work but issue is if we have other Elements within the Page, like text box’s, it’s not working correctly for them, it’s always only working within the GRID, but if i am at Textbox1 and want to move to Textbox2, when i press TAB it moves to next Cell within the GRID, how to take care of this issue.March 9, 2015 at 6:48 am key board navigation to navigate to next row once it reaches last cell #68176Hi hrajusb,
Please, provide us with a code sample we can test to determine the source of the issue.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.