jQuery UI Widgets Forums Grid Grid Autoscroll on AddRow

Tagged: , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Grid Autoscroll on AddRow #91333



    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.


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


    function populate(num) {
        var tmp = new Array();
        for (var i = 0; i < num; i++) {
                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() {
        {       $(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");
            }); },
    • This topic was modified 6 years, 3 months ago by  codz30.
    Grid Autoscroll on AddRow #91336

    Peter Stoev

    Hi codz30,

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

    Best Regards,
    Peter Stoev

    jQWidgets Team

    Grid Autoscroll on AddRow #91341


    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.

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

You must be logged in to reply to this topic.