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.
