jQuery UI Widgets › Forums › Grid › Grid Autoscroll on AddRow

Tagged: , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  codz30 7 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Grid Autoscroll on AddRow Posts
  • February 7, 2017 at 7:27 am Grid Autoscroll on AddRow #91333

    codz30
    Participant

    Hi,

    When adding a new row of data to an existing jqxGrid the scroll bar automatically jumps to the top to display the newly added row. I want the scroll bar to stay in the current position (e.g. if I am looking at row 34 and a new row is added, I want my experience to be unchanged by the new row).
    The use of “ensurerowvisible” could be useful, however the data row that I am looking at should not be hardcoded.
    I would prefer to have the scroll position track the currently visible (by user) rows even if new rows are being added to either the first or last positions of the data array.

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <link href="jqx.base.css" rel="stylesheet" />
    <script src="scripts/jquery-1.11.1.min.js"></script>
    <script src="scripts/jqx-all.js"></script>
    <script>
        window.onload = () => {
            load();
        };
    </script>
    <script src="app.js"></script>
</head>
<body>

    <div class="jqxgrid"></div>
    <div class="jqxgrid"></div>
</body>
</html>

    app.js

    
function populate(num) {
    var tmp = new Array();
    for (var i = 0; i < num; i++) {
        tmp.push({
            time: new Date().toString(),  value:  (Math.random() * 10000).toFixed(2),
            time2: new Date().toString(), value2: (Math.random() * 10000).toFixed(2),
            time3: new Date().toString(), value3: (Math.random() * 10000).toFixed(2),
            time4: new Date().toString(), value4: (Math.random() * 10000).toFixed(2),
            
        });
    }
    return tmp;
}

function load() {
    $('.jqxgrid').each(function()
    {       $(this).jqxGrid(
            {
                width: 2000,
                source: new $.jqx.dataAdapter({
                    localdata: populate(100), datatype: "array"
                }),
                          
                height: 200,
                sortable: false,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                    { text: 'Time', datafield:"time", width: 550 },
                    { text: 'Value', datafield: "value", width: 250 },
                    { text: 'Time2', datafield: "time2", width: 550 },
                    { text: 'Value2', datafield: "value2", width: 250 },
                    { text: 'Time3', datafield: "time3", width: 550 },
                    { text: 'Value3', datafield: "value3", width: 250 },
                    { text: 'Time4', datafield: "time4", width: 550 },
                    { text: 'Value4', datafield: "value4", width: 250 }
                ]
            });
    });
    setInterval(function () {
        $('.jqxgrid').each(function () {
            $(this).jqxGrid('addrow', null, populate(1), "first");
        }); },
        2000);
}
    February 7, 2017 at 7:45 am Grid Autoscroll on AddRow #91336

    Peter Stoev
    Keymaster

    Hi codz30,

    You cannot avoid that, but you can use ensurerowvisible to scroll to a given row.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    February 7, 2017 at 7:58 am Grid Autoscroll on AddRow #91341

    codz30
    Participant

    Thanks Peter,

    Using the ensurerowvisible command is undesirable because when the row is added the scroll is set to the top, then ensurerowvisible would move the scroll back to a set row. Whilst this may be suitable for adding rows at a slow rate, if data is added at a meaningful rate, the scroll position would be oscillating between the top row and the ensurerowvisible row.
    This oscillation would render the scroll bar useless for a user, because it would be moving so often.

    Thank you for your prompt feedback.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.