ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: pranit@srcomsec on November 29, 2022, 06:08:02 pm
-
We are getting an issue with selecting/unselecting rows via up/down arrow key & multi-select rows via Shift+up/down arrow key.
If we add the code (select row by clicking on the up/down arrow key) below then multi-select rows via Shift+up/down arrow key is not working. If we remove this code then multi-select rows via the Shift+down arrow key is working but unselecting via Shift+up is not working.
cellKeyDown: function (evt, ui)
{
var sr = this.SelectRow();
var currentIndx = ui.rowIndx;
if (evt.keyCode == $.ui.keyCode.DOWN) {
if (currentIndx + 1 >= this.getData().length) {
return;
}
sr.removeAll();
sr.add({ rowIndx: ui.rowIndx + 1 });
} else if (evt.keyCode == $.ui.keyCode.UP) {
if (currentIndx == 0) {
return;
}
sr.removeAll();
sr.add({ rowIndx: ui.rowIndx - 1 });
}
},
We can select multiple rows via Ctrl + Mouse click.
We need the following functionality works.
1) Select row via up/down arrow key: This will work with the code above but issue with multi-select rows then.
2) select/unselect multiple rows via Shift+up/down arrow key
My grid object details are as below:
$(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: false },
//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();
}
},
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,
cellSave: function (evt, ui) {
this.refreshRow({ rowIndx: ui.rowIndx });
},
create: function () {
var lsParamQueryGridState = $("#hfParamQueryGridState" + fiTableIndex).val();
if (lsParamQueryGridState != "")
$("#gridfilter" + fiTableIndex).pqGrid("loadState", { state: lsParamQueryGridState, refresh: true });
},
};
obj.dataModel =
{
method: "GET",
dataType: "JSON",
location: "remote",
url: "MY URL",
postData: function () {
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) {
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,
{
cellKeyDown: function (evt, ui)
{
var sr = this.SelectRow();
var currentIndx = ui.rowIndx;
if (evt.keyCode == $.ui.keyCode.DOWN) {
if (currentIndx + 1 >= this.getData().length) {
return;
}
sr.removeAll();
sr.add({ rowIndx: ui.rowIndx + 1 });
} else if (evt.keyCode == $.ui.keyCode.UP) {
if (currentIndx == 0) {
return;
}
sr.removeAll();
sr.add({ rowIndx: ui.rowIndx - 1 });
}
},
beforeCellKeyDown: function (event, ui)
{
if (event.ctrlKey && event.key == "F1") {
event.preventDefault();
}
else if (event.key == "Delete") {
return false; //to prevent default behaviour.
}
else if (event.key == "F1" || event.key == "+") {
//debugger;
console.log(this.SelectRow().getSelection());
event.preventDefault();
}
else if (event.key == "F2" || event.key == "-") {
event.preventDefault();
}
else if (event.key == "F3") {
event.preventDefault();
}
else if (event.key == "F5")
{
event.preventDefault();
}
},
});
});
Please help.
-
Hi, any update on this?
-
unselecting via shift - up is not supported for row selections.
Ctrl key + click can be used to deselect rows.
-
We are ok with unselecting via shift + up key functionality.
As per my earlier comments, we need the following functionality together. Currently, any one of the below functionality is working.
1) Select multiple rows via the down arrow key
2) select & focus the row when pressing the up/down arrow key
Please advise.
-
you can call focus method to focus cell in a row programmatically.
https://paramquery.com/pro/api#method-focus
-
Thank you, we used shiftKey & ArrowDown/ArrowUp to make this happen.