Author Topic: Infinite Scrolling and pqGrid PRO  (Read 3326 times)

PrgPLT

  • Newbie
  • *
  • Posts: 3
    • View Profile
Infinite Scrolling and pqGrid PRO
« on: April 21, 2019, 03:20:11 pm »
Hello
Today I've downloaded demo version of pqGrid PRO to check functionality before buy it
Now I can't figure out why example code from this https://paramquery.com/demos/infinite_scroll page does not work with PRO version.
All code was copied from example with minimum modifications.
Error:
Quote
Uncaught Error: cannot call methods on pqGrid prior to initialization; attempted to call method 'refreshDataAndView'

Code: [Select]
$(function () {
        var pq = {
            totalRecords: 0,
            requestPage: 1,
            pending: true,
            rpp: 100, //records per request.
            data: []
        };
        var obj = {           
            selectionModel: { type: 'row' },
            scrollModel: {
                autoFit: true
            },
            numberCell: { width: 60 },
            title: "Infinite Scrolling",
            virtualX: true, virtualY: true,
            resizable: true,
            beforeSort: function () {
                pq.data = [];
                pq.requestPage = 1;
            },
            beforeTableView: function (evt, ui) {               
                var finalV = ui.finalV,
                    data = pq.data;
                if (ui.initV == null) {
                    return;
                }
                console.log('fire before table view');
                if (!pq.pending && finalV >= data.length - 1 && data.length < pq.totalRecords) {
                    pq.requestPage++;
                    pq.pending = true;
                    //request more rows.
                    $(this).pqGrid('refreshDataAndView');
                }
            }
        };

        obj.colModel = [
            { title: "ID", dataIndx: 'id' },
            { title: "RecId", dataIndx: 'rec_id' },
            { title: "Orgstruct", dataType: "integer", align: "right", dataIndx: 'slc_orgstruct'},
            { title: "Gorizont", dataType: "string", align: "right", dataIndx: 'slc_gorizont'},
            { title: "Tblock", dataType: "string", align: "left", dataIndx: 'slc_tblock'},
            { title: "Gblock", dataType: "string", align: "left", dataIndx: 'slc_gblock'},
            { title: "Cal Date", dataType: "date", align: "left", dataIndx: 's0d_caldate', format:'dd.mm.yy'},
            { title: "Cal Year", dataType: "integer", align: "left", dataIndx: 's0d_calyear'},
            { title: "Cal Month", dataType: "integer", align: "left", dataIndx: 's0d_calmonth'},
            { title: "Index", dataType: "string", align: "left", dataIndx: 'slc_index'},
            { title: "Value", dataType: "float", align: "left", dataIndx: 'i00_value'}
        ];

        obj.dataModel = {
            data: pq.dataCache,
            dataType: "JSON",
            location: "remote",
            method: 'POST',
            sorting: 'remote',
            sortIndx: 'company',
            url: "/cascading/cascading/get-test-data",
            postData: function () {
                return {
                    pq_curpage: pq.requestPage,
                    pq_rpp: pq.rpp
                };
            },
            getData: function (response) {
                var data = response.data,
                    len = data.length,
                    curPage = response.curPage,
                    pq_data = pq.data,
                    init = (curPage - 1) * pq.rpp;
                pq.pending = false;
                pq.totalRecords = response.totalRecords;
                for (var i = 0; i < len; i++) {
                    pq_data[i + init] = data[i];
                }
                return { data: pq_data }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //alert(errorThrown);
            }
        };

        $("#param-query-demo").pqGrid(obj);
    });

Advise me please

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Infinite Scrolling and pqGrid PRO
« Reply #1 on: April 21, 2019, 04:03:51 pm »
This error usually occurs if jQuery and jQueryUI dependencies are not included.
« Last Edit: April 21, 2019, 04:43:51 pm by paramquery »

PrgPLT

  • Newbie
  • *
  • Posts: 3
    • View Profile
Re: Infinite Scrolling and pqGrid PRO
« Reply #2 on: April 21, 2019, 06:11:45 pm »
This error usually occurs if jQuery and jQueryUI dependencies are not included.

There are all dependencies included:

<head>
-- JQuery (v3.2.1)
</head>
<body>
...
...
-- JQueryUI (v1.11.4)
-- pqGrid
-- pqGrid init script
</body>

Does exist any other reasons of error?

Maybe will useful: pqGrid has rendered well, error fires at the time to load another 100 records
« Last Edit: April 21, 2019, 06:13:56 pm by PrgPLT »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Infinite Scrolling and pqGrid PRO
« Reply #3 on: April 21, 2019, 08:45:53 pm »
use

Code: [Select]
this.refreshDataAndView() 

instead of

Code: [Select]
$(this).pqGrid('refreshDataAndView');

PrgPLT

  • Newbie
  • *
  • Posts: 3
    • View Profile
Re: Infinite Scrolling and pqGrid PRO
« Reply #4 on: April 22, 2019, 08:52:22 am »
use

Code: [Select]
this.refreshDataAndView() 

instead of

Code: [Select]
$(this).pqGrid('refreshDataAndView');

It works now. Thanks for the help!