Author Topic: Virtual Scrolling + Empty row issue when scrolling quickly  (Read 348 times)

pranit@srcomsec

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 99
    • View Profile
Virtual Scrolling + Empty row issue when scrolling quickly
« 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);

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Virtual Scrolling + Empty row issue when scrolling quickly
« Reply #1 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.

pranit@srcomsec

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 99
    • View Profile
Re: Virtual Scrolling + Empty row issue when scrolling quickly
« Reply #2 on: November 23, 2022, 02:11:25 pm »
Thank you. It is working after changing the per-page records.