jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Keyboard navigation in jqxGrid.</title> <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="../../../scripts/jquery-1.12.4.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 grid. $("#grid").jqxGrid( { width: 670, height: 300, source: dataAdapter, editable: true, ready: function() { $("#grid").jqxGrid('selectcell', 0, 'ShipName'); // focus grid. $("#grid").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' } ] }); }); </script> <div id='jqxWidget' v> <div id='grid'> </div> <div style="font-family: Verdana; font-size: 12px; width: 670px;"> <ul> <li><b>Left Arrow</b> key is pressed - Selects the left cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li> <li><b>Right Arrow</b> key is pressed - Selects the right cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li> <li><b>Up Arrow</b> key is pressed - Selects the cell above, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li> <li><b>Down Arrow</b> key is pressed - Selects the cell below, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li> <li><b>Page Up/Down</b> is pressed - Navigate Up or Down with one page, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li> <li><b>Home/End</b> is pressed - Navigate to the first or last row, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.</li> <li><b>Enter</b> key is pressed - Moves one cell down in "multiplecellsadvanced" selection mode. If the cell is in edit mode, saves the new value and moves one cell down. In the other selection modes, shows the selected cell's editor. If the cell is in edit mode, hides the cell's editor and saves the new value. The editor's value is equal to the cell's value.</li> <li><b>Esc</b> key is pressed - Hides the cell's editor and cancels the changes.</li> <li><b>Tab</b> key is pressed - Selects the right cell. If the Grid is in edit mode, saves the edit cell's value, closes its editor, selects the right cell and opens its editor.</li> <li><b>Shift+Tab</b> keys are pressed - Selects the left cell. If the Grid is in edit mode, saves the edit cell's value, closes its editor, selects the left cell and opens its editor.</li> <li><b>F2</b> key is pressed - shows the selected cell's editor when the Grid is in edit mode.</li> <li><b>Space</b> key is pressed - Toggles the checkbox editor's check state when the selected cell's column is a checkbox column and the Grid is editable.</li> <li><b>Shift+Arrow</b> key extends the selection.</li> <li><b>Shift</b> extends the selection when the user clicks on a cell or row..</li> <li><b>Ctrl</b> key is pressed - in 'multiplecellsextended, multiplecellsadvanced and multiplerowsextended' selection mode, extends the selection when the user clicks on a cell or row. </li> <li><b>Ctrl+Arrow</b> key - moves to an edge. </li> <li><b>Ctrl+C</b> Copy. </li> <li><b>Ctrl+X</b> Cut. </li> <li><b>Ctrl+V</b> Paste. </li> <li><b>Page Down</b> - Moves one screen down</li> <li><b>Page Up</b> - Moves one screen up</li> <li><b>Home</b> - Moves to the beginning</li> <li><b>End</b> - Moves to the end</li> <li>Typing in a cell when the Grid is "editable" will put the cell in edit mode.</li> </ul> </div> </div> </div> <div style="position: absolute; bottom: 5px; right: 5px;"> <a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a> </div> </body> </html>