Scroll bar will move but the items in the grid is not moving up/down - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid

This topic contains 3 replies, has 3 voices, and was last updated by admin 2 years, 11 months ago.

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

Author

Scroll bar will move but the items in the grid is not moving up/down Posts

October 16, 2020 at 11:13 am Scroll bar will move but the items in the grid is not moving up/down #113351

Participant

I have a page in which, I have a table which is greater than page size. So, Both page and table have a scroll. When I hover over table and scroll vertical scroll bar is moving but the records in the tables are not scrolling up and down. But can able to scroll while using scroll bar to scroll. Any leads are welcome.
JQ Version: 4.5.0

October 16, 2020 at 11:33 am Scroll bar will move but the items in the grid is not moving up/down #113354

admin

Keymaster

Hi MaheshReddyNarsing,

This issue is fixed in the current version of jQWidgets – 10.1.6. If you have an active subscription, you can update to it.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

January 26, 2022 at 4:30 pm Scroll bar will move but the items in the grid is not moving up/down #121432

Jwhitbread

Participant

Hi Peter,

I’m currently running 12.2.0 and I’m having this issue.

When I set the JqxGrid offset with the “scrolloffset” method in the API, the Scroll bar does stay in position however the contents return to the top upon data refresh. I have tried setting the method after the refresh of the grid along with the “bindingcomplete” without luck.

Worth noting that I have also pinned the header of the grid if that could be causing an issue?

Otherwise a possible workaround like how I would fix the browser scrool bar like so:
$(“html, body”).animate({scrollTop: current_scroll});
If you know which class I should try to animate in this way instead of html and body?

Thanks,
Jamie.

January 27, 2022 at 7:47 am Scroll bar will move but the items in the grid is not moving up/down #121434

admin

Keymaster

Hi Jamie,

Please, take a look at the following code showing how to use the scrolloffset method:


<!DOCTYPE html>
<html lang="en">

<head>
    <title id='Description'>In this sample is demonstrated how to display aggregates in jqxGrid.</title>
    <meta name="description" content="JavaScript Grid which has multiple built-in aggregates" />
    <link rel="stylesheet" href="../../../jqwidgets-src/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-src/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxdata.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../../jqwidgets-src/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(200);

            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#grid").jqxGrid(
                {
                    width: getWidth('Grid'),
                    source: dataAdapter,
                    showstatusbar: true,
                    statusbarheight: 50,
                    editable: true,
                    showaggregates: true,
                    selectionmode: 'singlecell',
                    ready() {
                        $("#grid").jqxGrid('scrolloffset', 200, 0);
                    },
                    columns: [
                        { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
                        { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
                        {
                            text: 'Product', datafield: 'productname', width: 170,
                            aggregates: ['count',
                                {
                                    'Cappuccino Items':
                                        function (aggregatedValue, currentValue) {
                                            if (currentValue == "Cappuccino") {
                                                return aggregatedValue + 1;
                                            }

                                            return aggregatedValue;
                                        }
                                }
                            ]
                        },
                        {
                            text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125,
                            aggregates: [{
                                'In Stock':
                                    function (aggregatedValue, currentValue) {
                                        if (currentValue) {
                                            return aggregatedValue + 1;
                                        }

                                        return aggregatedValue;
                                    }
                            },
                            {
                                'Not In Stock':
                                    function (aggregatedValue, currentValue) {
                                        if (!currentValue) {
                                            return aggregatedValue + 1;
                                        }

                                        return aggregatedValue;
                                    }
                            }
                            ]
                        },
                        {
                            text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'],
                            aggregatesrenderer: function (aggregates) {
                                var renderstring = "";
                                $.each(aggregates, function (key, value) {
                                    var name = key == 'min' ? 'Min' : 'Max';
                                    renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value + '</div>';
                                });
                                return renderstring;
                            }
                        },
                        { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
                    ]
                });
        });
    </script>
</head>

<body class='default'>
    <div id='jqxWidget'>
        <div id="grid"></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>

Hope this helps.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.