ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: pranit@srcomsec on January 02, 2023, 07:26:04 pm
-
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 });
}
},
});
});
-
Drag and drop works fine for me in virtual scroll demo: https://paramquery.com/pro/demos/virtual_scroll
Do you get any error in the browser console. Kindly share a jsfiddle reproducing the issue,
-
No error in the console.
Looks like an issue when grid rows are updating every second. If we paused the update then it is working fine.
Let me know if you have any suggestions.
-
Pause the update when drag and Drop is in progress.
-
Please advise Drag start & stop event.
-
dragModel:{
on: true,
options: {
start: function(){
console.log("dragging start");
},
stop: function(){
console.log("dragging stop");
}
},
......
},