« previous next »
Pages: [1]

Author Topic: refreshView causes very annoying interface changes  (Read 3337 times)

pgridEval

  • Newbie
  • *
  • Posts: 5
    • View Profile
refreshView causes very annoying interface changes
« on: June 19, 2018, 05:26:49 am »
The refreshView callback appears to be causing interface flashes. The problem is that this causes extremely bad interface experience for any user. For example If the user has sorted a column and thus the header of sorted column is highlighted or has other interface changes this column will now blink every time there is a data change to the table.

Imagine working on a grid and having the rows being updated every second. Now you have this constantly blinking header. The cause of this is because during the rebuild it completely wipes the columns of their sort classes. Then, it later adds them back. This causes a blinking interface change.

Is this really how the software functions? I have a deep understanding of every class listed in the API. Once a grid's data is refreshed the only way to get the view to correspond to the data (such as sort the data based on user preferred sorting) is to refresh the view. This can be done via refreshView (or refreshDataAndView which is what I am using). This is the officially documented method to refresh the view.

In addition to this I have attempted to avoid this refresh by simply triggering a re-sort via the "sort" method. However, once again, this causes blinking too. Why? Because once again, the software removes a class from the header just to add it back (why would it remove something it needs to add? It is logical to check this stuff to avoid interface issues).

Logged

pgridEval

  • Newbie
  • *
  • Posts: 5
    • View Profile
Re: refreshView causes very annoying interface changes
« Reply #1 on: June 20, 2018, 12:06:27 am »
These bugs are demonstrated in this test case:

Code: [Select]
<head>
    <link rel="stylesheet" href="paramquery/pqgrid.min.css">
    <script type="text/javascript" src="paramquery/jquery.js"></script>
    <script type="text/javascript" src="paramquery/jquery-ui.js"></script>
    <script type="text/javascript" src="paramquery/pqgrid.min.js"></script>
    <script type="text/javascript" src="paramquery/generatedata.js"></script>
    <style>
        .pq-grid-title-row .pq-grid-col {
            font-weight: normal;
            text-transform: uppercase;
            background-color: #F5F5F5;
        }

        .pq-grid-col.pq-col-sort-asc, .pq-grid-col.pq-col-sort-desc{
            background-color: #8dbdd8;
            background-repeat: no-repeat;
            background-position: center right;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
                ["Beate", "Fuller", 585787, 913460, 7, 28],
                ["Cheryl", "Wilson", 102961, 821096, 7, 21],
                ["Petra", "Petersen", 731172, 728432, 10, 38],
                ["Yoshi", "Nodier", 911861, 668539, 4, 16],
                ["Beate", "Nagase", 358816, 475010, 7, 21],
                ["Martin", "Davolio", 648916, 368401, 8, 12],
                ["Yoshi", "Winkler", 832008, 218008, 11, 41.8],
                ["Martin", "Murphy", 676375, 211160, 5, 25],
                ["Elio", "Fuller", 845996, 148232, 10, 17.5]
            ];
            var obj = {
                sortable: true,
                height: '300',
                sortModel: {
                    ignoreCase: true,
                    sorter: [ { dataIndx: 3, dir: 'down' } ]
                },
                selectionModel: { type: 'row' },
                scrollModel: { autoFit: true },
                numberCell: { width: 70, resizable: true },
                showTitle: false,
                //filterModel: { on: true, mode: "AND", header: true },
                virtualX: true, virtualY: true,
                resizable: true,
                colModel: [
                    { title: 'First Name', dataType: 'string', filter: { type: "textbox", condition: 'begin', listeners: ['keyup']} },
                    { title: 'Last Name', dataType: 'string'},
                    { title: 'Product', dataType: 'string' },
                    { title: 'Quantity', dataType: 'float' },
                    { title: 'Unit Price', dataType: 'float' },
                    { title: 'Total', dataType: 'float' }
                ],
                dataModel: {
                    data: data
                }
            };

            $("#grid").pqGrid(obj);

            var finalTime = new Date();

            setInterval(function() {
                for (var i = 0; i < data.length; i++) {
                    data[i][2] = Math.floor((Math.random() * 999999) + 1);
                    data[i][3] = Math.floor((Math.random() * 999999) + 1);
                    $("#grid").pqGrid('updateRow', {
                        rowList: [
                            {rowIndx: data[i][0], newRow: data[i]}
                        ]
                    });
                }
                $("#grid").pqGrid('refreshDataAndView');
            }, 1000);
        });
    </script>
</head>
<body class="default">
<div style="height: 300px; overflow: auto">
    <div id="grid""></div>
</div>
</body></html>
Logged

pgridEval

  • Newbie
  • *
  • Posts: 5
    • View Profile
Re: refreshView causes very annoying interface changes
« Reply #2 on: June 20, 2018, 12:09:48 am »
This bug is further demonstrated in the demo: https://paramquery.com/pro/demos/comments

Add the following code to generate a render and you will see all the rendering bugs:

Code: [Select]
setInterval(function() {
    for (var i = 0; i < data.length; i++) {
        data[i].revenue = Math.floor((Math.random() * 999999) + 1);
        $("#grid_row_styles").pqGrid('updateRow', {
            rowList: [
                {rowIndx: data[i][0], newRow: data[i]}
            ]
        });
    }
    $("#grid_row_styles").pqGrid('refreshDataAndView');
}, 1000);
    });
Logged

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: refreshView causes very annoying interface changes
« Reply #3 on: June 26, 2018, 04:52:26 pm »
As a general rule, refresh* methods are only required when directly manipulating dataModel.data to make view sync with data.

refresh* methods in your code are redundant.

There is no need to call updateRow method in a loop ( bad for performance ), rather a single call to updateRow() method can update multiple rows. Please check the API.

Some parts of the header are post rendered separately from the body by design for performance reasons. It causes a blink, I would look into it if it can be improved.
Logged
Pages: [1]
« previous next »