ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: pranit@srcomsec on November 22, 2022, 05:43:59 pm

Title: Virtual Scrolling + Empty row issue when scrolling quickly
Post by: pranit@srcomsec on November 22, 2022, 05:43:59 pm

We get empty rows in the grid if we scroll quickly via the scroll bar.  Please refer to the attached screenshot and advise.

The data is loaded without any issue if we scroll via the mouse Or scroll slowly.

Javascript for grid object as below:

Code: [Select]

var pqVS = {
rpp: 20, //records per page.
init: function () {
this.totalRecords = 0;
this.requestPage = 1; //begins from 1.
this.data = [];
}
};
pqVS.init();

var obj =
{
width: "auto",
scrollModel: {
autoFit: true
},
numberCell: { width: 30, show: true },
//title: "Virtual Scrolling",
resizable: true,
filterModel: { header: false, type: 'remote', menuIcon: true },
menuIcon: true,
//sortModel: { type: 'remote', sorter: [{ dataIndx: 'inRowIndex', dir: 'up' }] },
sortModel: { type: 'remote' },
selectionModel: { type: 'row', mode: 'block' },
editable: false,
beforeSort: function (evt) {
if (evt.originalEvent) {//only if sorting done through header cell click.
pqVS.init();
}
},
beforeFilter: function () {
pqVS.init();
},
beforeTableView: function (evt, ui) {
var initV = ui.initV,
finalV = ui.finalV,
data = pqVS.data,
rpp = pqVS.rpp,
requestPage;

if (initV != null) {

//if records to be displayed in viewport are not present in local cache,
//then fetch them from remote database/server.

if (data[initV] && data[initV].pq_empty) {
requestPage = Math.floor(initV / rpp) + 1;
}
else if (data[finalV] && data[finalV].pq_empty) {
requestPage = Math.floor(finalV / rpp) + 1;
}

if (requestPage >= 1) {
if (pqVS.requestPage != requestPage) {

pqVS.requestPage = requestPage;

//initiate remote request.                       
this.refreshDataAndView();
}
}
}
},
colModel: fsTableHeaders,
cellSave: function (evt, ui) {
this.refreshRow({ rowIndx: ui.rowIndx });
},

create: function () {
var lsParamQueryGridState = $("#hfParamQueryGridState" + fiTableIndex).val();
$("#gridfilter" + fiTableIndex).pqGrid("loadState", { state: lsParamQueryGridState, refresh: true });
},
};

var fiType = 1;
var liGroupID = 123;
var lsStrategyUID = "TEST";
var fsColumnList = "stExchange, stSymbol";

obj.dataModel =
{
method: "GET",
dataType: "JSON",
location: "remote",
url: "My URL",

postData: function () {
//debugger;
return {
pq_curpage: pqVS.requestPage,
pq_rpp: pqVS.rpp,
pq_type: fiType,
pq_group_id: liGroupID,
pq_strategy_uid: lsStrategyUID,
pq_column_list: fsColumnList,
};
},

getData: function (response) {
$("#gridfilter1").pqGrid("hideLoading");
var data = response.data,
totalRecords = response.totalRecords,
len = data.length,
curPage = response.curPage,
pq_data = pqVS.data,
init = (curPage - 1) * pqVS.rpp;

if (!pqVS.totalRecords) {
//first time initialize the rows.
for (var i = len; i < totalRecords; i++) {
pq_data[i + init] = { pq_empty: true };
}
pqVS.totalRecords = totalRecords;
}
for (var i = 0; i < len; i++) {
pq_data[i + init] = data[i];
pq_data[i + init].pq_empty = false;
}
return { data: pq_data }
},
error: function (jqXHR, textStatus, errorThrown) {
//alert(errorThrown);
}
};

var grid = $("#gridfilter1").pqGrid(obj);


Title: Re: Virtual Scrolling + Empty row issue when scrolling quickly
Post by: paramvir on November 23, 2022, 12:38:07 pm

set records per page ( rpp ) larger than size of viewport to resolve this issue.

In your screesnshot, there are ~30 rows in viewport but rpp is 20.

Try to set it more than (30 + 5 = 35) and check the results.

Title: Re: Virtual Scrolling + Empty row issue when scrolling quickly
Post by: pranit@srcomsec on November 23, 2022, 02:11:25 pm

Thank you. It is working after changing the per-page records.