Author Topic: Header Filters not working while refresh cells  (Read 342 times)

[email protected]

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 71
    • View Profile
Header Filters not working while refresh cells
« on: November 02, 2022, 06:49:21 pm »
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!
« Last Edit: November 02, 2022, 06:51:32 pm by pranit0405 »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5787
    • View Profile
Re: Header Filters not working while refresh cells
« Reply #1 on: November 02, 2022, 11:33:03 pm »
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.

[email protected]

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 71
    • View Profile
Re: Header Filters not working while refresh cells
« Reply #2 on: November 04, 2022, 12:50:58 pm »
Thanks! It got solved using local Filtering

[email protected]

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 71
    • View Profile
Re: Header Filters not working while refresh cells
« Reply #3 on: November 30, 2022, 10:54:52 am »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 5787
    • View Profile
Re: Header Filters not working while refresh cells
« Reply #4 on: November 30, 2022, 02:02:45 pm »
Try passing {header: false } to whatever refresh* method you are using to refresh grid every second.

[email protected]

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 71
    • View Profile
Re: Header Filters not working while refresh cells
« Reply #5 on: November 30, 2022, 04:44:57 pm »
We already pass this parameter to the grid & see the same issue.
Code: [Select]
filterModel: { header: false, type: 'remote', menuIcon: true },

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5787
    • View Profile
Re: Header Filters not working while refresh cells
« Reply #6 on: November 30, 2022, 10:05:36 pm »
No, pass the {header: false } to whatever refresh*() API method you are using to refresh grid e.g.,

Code: [Select]
  grid.refreshDataAndView({header: false});

[email protected]

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 71
    • View Profile
Re: Header Filters not working while refresh cells
« Reply #7 on: December 01, 2022, 11:53:07 am »
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.
« Last Edit: December 01, 2022, 12:34:38 pm by [email protected] »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5787
    • View Profile
Re: Header Filters not working while refresh cells
« Reply #8 on: December 01, 2022, 07:25:35 pm »
Which grid method are you using to refresh data every second?

[email protected]

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 71
    • View Profile
Re: Header Filters not working while refresh cells
« Reply #9 on: December 01, 2022, 07:44:00 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 5787
    • View Profile
Re: Header Filters not working while refresh cells
« Reply #10 on: December 01, 2022, 10:17:07 pm »
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?
« Last Edit: December 01, 2022, 10:48:15 pm by paramvir »