jQuery UI Widgets Forums Grid key board navigation to navigate to next row once it reaches last cell

This topic contains 3 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • hrajusb
    Participant

    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.


    Nadezhda
    Participant

    Hello 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,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    hrajusb
    Participant

    Hi 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.


    Nadezhda
    Participant

    Hi hrajusb,

    Please, provide us with a code sample we can test to determine the source of the issue.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.