jQuery UI Widgets Forums Grid custom keyboard nav

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)
  • Author
  • custom keyboard nav #61546

    dc
    Participant

    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

    custom keyboard nav #62117

    Nadezhda
    Participant

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

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

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

You must be logged in to reply to this topic.