jQuery UI Widgets Forums Grid Scroll bar will move but the items in the grid is not moving up/down

Tagged: 

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

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

  • MaheshReddyNarsing
    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


    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/


    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.


    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/

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

You must be logged in to reply to this topic.