We are updating grid data by every second. For example, the stock rate column.
We are opening the dialog box by clicking the "F1" key. The dialog is opened and closed by clicking on the Esc key. The dialog is closed & scroll position is moved to the top. We need to keep the scroll position when the dialog is closed. For example, if we open a dialog box from the 5th page of the grid then keep my scroll on the 5th page after closing the dialog.
See attached screenshots.
1_22112022.png: Open the dialog box from the 5th page
2_22112022.png: CLose dialog box from the 5th page & scroll moved on the top
Please review the gird obj javascript below and advise.
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 = $("#gridfilter" + fiTableIndex).pqGrid(obj,
{
beforeCellKeyDown: function (event, ui)
{
if (event.key == "F1")
{
$("#myBuySellv2").dialog({
title: "Buy - INFY",
modal: true,
width: 'auto',
}).dialog("open");
$('#myBuySellv2').dialog('option',
'buttons',
{
"Buy": function () {
//alert('Click on Buy button');
placeOrder(false);
$(this).dialog("close");
}
});
$(".ui-dialog").find(".ui-widget-header").css("background", "blue");
$(".ui-dialog").find(".ui-widget-header").css("color", "#fff");
$(".ui-dialog").find(".ui-dialog-buttonpane").css("background", "blue");
$(".ui-dialog").find(".ui-dialog-buttonpane").css("color", "#fff");
$(".ui-dialog").find(".ui-dialog-buttonset").css("font-weight", "bold");
event.preventDefault();
}
},
});
