We are using virtual scrolling to load records based on the user scrolling, which is working fine. Refer to the attached screenshot (src1.png).
When we move the row then only shows 10 records in the grid. Refer to the attached screenshot (src2.png).
Please review the Grid code below and advise.
$(function ()
{
var pqVS = {
rpp: 35, //records per page.
init: function () {
this.totalRecords = 0;
this.requestPage = 1; //begins from 1.
this.data = [];
}
};
pqVS.init();
var obj =
{
width: "auto",
numberCell: { width: 30, show: true },
//title: "Virtual Scrolling",
resizable: true,
filterModel: { header: false, type: 'remote', menuIcon: true, hideRows: true },
menuIcon: true,
sortModel: { type: 'remote' },
selectionModel: { type: 'row', mode: 'block' },
editable: false,
stripeRows: false, //Remove alternate row color
strNoRows : 'No Rows found. Please load Portfolio if not loaded.',
beforeSort: function (evt)
{
if (evt.originalEvent) {//only if sorting done through header cell click.
pqVS.init();
}
},
dragModel: {
on: true,
/*diDrag: "inRowIndex"*/
},
dropModel: {
on: true
},
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();
this.hideLoading();
}
}
}
},
colModel: fsTableHeaders,
rowInit: function (ui)
{
},
cellSave: function (evt, ui)
{
this.refreshRow({ rowIndx: ui.rowIndx });
},
};
obj.dataModel =
{
method: "GET",
dataType: "JSON",
location: "remote",
url: "get-market-strategy-watch-data.aspx",
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)
{
if (response.data != undefined && response.data != null)
{
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 }
}
else
return { data: [] }
},
error: function (jqXHR, textStatus, errorThrown) {
//alert(errorThrown);
}
};
var grid = $("#gridfilter1").pqGrid(obj,
{
rowClick: function (event, ui) {
//console.log(ui);
$("#hfSelectedRowIndex" + fiTableIndex).val(ui.rowIndx);
$("#hfLastTableIndexClicked").val(fiTableIndex);
},
beforeCellKeyDown: function (event, ui) {
if (event.ctrlKey && event.key == "F1") {
console.log("ctrlKey + F1");
event.preventDefault();
}
else if (event.shiftKey && event.key == "ArrowDown")
{
var sr = this.SelectRow();
var currentIndx = ui.rowIndx;
if (currentIndx + 1 >= this.getData().length) {
return;
}
var isSelected = sr.isSelected({rowIndx: ui.rowIndx + 1 });
if (isSelected)
sr.add({ rowIndx: ui.rowIndx + 1 });
else
sr.remove({ rowIndx: ui.rowIndx + 1 });
}
else if (event.key == "ArrowDown")
{
var sr = this.SelectRow();
var currentIndx = ui.rowIndx;
if (currentIndx + 1 >= this.getData().length) {
return;
}
sr.removeAll();
sr.add({ rowIndx: ui.rowIndx + 1 });
}
else if (event.shiftKey && event.key == "ArrowUp")
{
var sr = this.SelectRow();
var currentIndx = ui.rowIndx;
if (currentIndx == 0) {
return;
}
var isSelected = sr.isSelected({rowIndx: ui.rowIndx - 1 });
if (isSelected)
sr.add({ rowIndx: ui.rowIndx - 1 });
else
sr.remove({ rowIndx: ui.rowIndx - 1 });
}
else if (event.key == "ArrowUp")
{
var sr = this.SelectRow();
var currentIndx = ui.rowIndx;
if (currentIndx == 0) {
return;
}
//if (!event.ctrlKey)
sr.removeAll();
sr.add({ rowIndx: ui.rowIndx - 1 });
}
},
});
});
