Header Filters not working while refresh cells

[pranit@srcomsec]

We are working on a project in which there are 5000+ records, so we are are using lazy loading to display + filter + sort the data. The data is dynamic and there are scenarios that the data in the grid will refresh very second.

While doing so, when the data in the grid is being updated with new data, the header filter is not being accessible by the user.

The user cant click on the header filter - and if clicked while typing the query in the filter if the data is updated, the cursor is lost from the filter

Is there a work around for this, because there are chances that the data will continually be updated

Thanks in advance!

[paramvir]

you have to wait at least until the lazyComplete event or complete event fires to load new set of data in the grid.

you can also try local filtering.

Please let me know whether it resolves your issue or you can share a jsfiddle for better clarity on the issue.

[pranit@srcomsec]

Thanks! It got solved using local Filtering

[pranit@srcomsec]

Hi, we got this working using local filters but is it possible to make remote header filtering work, if we are updating cells every second? The problem we are facing is that the user cant click on the header filter - and if clicked while typing the query in the filter if the data is updated, the cursor is lost from the filter.

Please see if we can get this to work as it is very important for our usage.

Any suggestions are much appreciated.

[paramvir]

Try passing {header: false } to whatever refresh* method you are using to refresh grid every second.

[pranit@srcomsec]

We already pass this parameter to the grid & see the same issue.

Code: [Select]

filterModel: { header: false, type: 'remote', menuIcon: true },


[paramvir]

No, pass the {header: false } to whatever refresh*() API method you are using to refresh grid e.g.,

Code: [Select]

  grid.refreshDataAndView({header: false});


[pranit@srcomsec]

Thank you for your quick response.

We tried with the below and still not working.

Code: [Select]

this.refreshDataAndView({header: false});


Code: [Select]

cellSave: function (evt, ui) {
     this.refreshRow({ rowIndx: ui.rowIndx, header: false });
}


Code: [Select]

$("#gridfilter1").pqGrid("updateRow", {
        rowList: [Array list for multiple row update],
        header: false
});

Also, when we pass "header: false" then filter is stop working.

[paramvir]

Which grid method are you using to refresh data every second?

[pranit@srcomsec]

We are using virtual scrolling.

We are calling our custom method every second and get the updated row data to create a list array. At the last call updateRow method to update all rows in the grid.

Code: [Select]

$("#gridfilter1").pqGrid("updateRow", {
         rowList: lArrRowUpdate (Array list to update multiple rows)
});

My grid object details are as below:

Code: [Select]

$(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,
rowInit: function (ui) {
},
cellSave: function (evt, ui) {
this.refreshRow({ rowIndx: ui.rowIndx });
},

create: function () {
var lsParamQueryGridState = $("#hfParamQueryGridState1").val();
if (lsParamQueryGridState != "")
$("#gridfilter1").pqGrid("loadState", { state: lsParamQueryGridState, refresh: true });
},
};

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) {
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 = $("#gridfilter1").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") {
console.log("ctrlKey + F1");
event.preventDefault();
}
else if (event.key == "Delete") {

return false; //to prevent default behaviour.
}
else if (event.key == "F1" || event.key == "+") {
console.log(this.SelectRow().getSelection());
event.preventDefault();
}
else if (event.key == "F2" || event.key == "-") {
console.log(this.SelectRow().getSelection());
event.preventDefault();
}
else if (event.key == "F3") {
console.log(this.SelectRow().getSelection());
event.preventDefault();
}
else if (event.key == "F5") {
console.log(this.SelectRow().getSelection());
event.preventDefault();
}
},
});
});


[paramvir]

I tested this code

Code: [Select]

var grid = $("#grid_infinite").pqGrid('instance');
setInterval(function(){
debugger;
grid.updateRow( {
rowList: [
{ rowIndx: 2, newRow: { 'company': Math.random() }},
{ rowIndx: 5, newRow: { 'company': Math.random() }}
]
});   

},1000);

in this example: https://paramquery.com/pro/demos/virtual_scroll

But updateRow doesn't affect the header filter working or its focus. Have I missed something?