Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - pgridEval

Pages: [1]
1
ParamQuery Pro Evaluation Support / Re: refreshView causes very annoying interface changes
« 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);
    });

2
ParamQuery Pro Evaluation Support / Re: refreshView causes very annoying interface changes
« 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>

3
ParamQuery Pro Evaluation Support / 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).


4
ParamQuery Pro Evaluation Support / How to modify a grid row as it renders?
« on: June 19, 2018, 04:52:47 am »
Since rendering of rows is done dynamically as the user scrolls there needs to be a way to modify the row. For example, the necessity to add classes. For example, in my test use-case I am tracking which row a user last clicked. This row receives the "selected" class. The user scrolls and suddenly the class is gone because the row renders from the start.

As a result, the only way for the pqGrid to work correctly is to be able to modify row as it renders. How is this done?

5
ParamQuery Pro Evaluation Support / Bug: postRender does not work
« on: June 19, 2018, 04:49:46 am »
The documented feature here is broken: https://paramquery.com/pro/api#option-column-postRender

You can even edit a demo and add postRender to a col model and you will see it never gets called.

Pages: [1]