Stop by moving the page by key presses - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: down arrow key, focus, grid, ie, jqxgrid, pagechanged, up arrow key

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

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

Author

Stop by moving the page by key presses Posts

January 28, 2015 at 12:09 pm Stop by moving the page by key presses #66130

Naoki I.

Participant

Browser: IE9, 10, 11

By selecting the row and occurs when you move the page by pressing the up or down keys.

It does not move and presses the up or down keys.
Again move if otherwise manipulated.

Will there a way to not stop?

This phenomenon can be confirmed in DEMO.

January 28, 2015 at 2:02 pm Stop by moving the page by key presses #66135

Nadezhda

Participant

Hello Naoki I.,

Please, provide us with more information about this issue.

Best Regards,
Nadezhda

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

January 28, 2015 at 2:38 pm Stop by moving the page by key presses #66141

Naoki I.

Participant

Thank you for reply.

Hmm. Source is not now.

For example, 10 rows of data exists.
Will be data display of 5 rows on 1 page.
The 3row click (select), and is pressed several times Down key. Then, should the selected row is moved.

To Down (4row)…Down (5row)…Down (6row: next page), and Down(STOP!?).

Can not be moved even by pressing the down key on the 7row. This will not be able to move even by pressing the up key in the 5row.

January 29, 2015 at 9:01 am Stop by moving the page by key presses #66163

Nadezhda

Participant

Hi Naoki I.,

Please, find the following workaround where the keyboard Focus is set to the jqxGrid widget when the current page is changed.

<!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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
            $('#jqxgrid').on('pagechanged', function (event) {
                $('#jqxgrid').jqxGrid('focus');

            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.