ParamQuery issue with frozen columns and vertical scroll

[gopigupta]

Hello,

I am using paramquery grid(v8.4.0) to load data. This grid has 4 columns and 1st column is kept frozen using freezeCols property. Data is also loading correctly in grid(approx 500 rows).

The issue is, after loading the data, if I scroll down fast and try to select cell from first column, then grid wont allow me to select cell. It does not give any error but neither allow to select cell. It will allow to select cells from other columns(which are not frozen). This issue mostly happens when I try to scroll down fast.

I am attaching sample code written in cshtml. I am able to reproduce the issue from this sample code.

Thanks.       

[paramvir]

I've created this jsfiddle from your code, but am unable to reproduce the mentioned issue.

https://jsfiddle.net/z0cgjw68/

Please re check and try to reproduce in the jsfiddle.

[gopigupta]

Hi paramvir,

thanks for your reply. I am able to generate same issue in jsfiddle too. I am using google chrome.

steps to reproduce:-
1. wait for jsfiddle page to completely load.
2. scroll down grid using mouse scroll and immediately click on first column cell. Grid will not allow to select that cell.

attaching with screenshots:-

Screenshot1 - not allowing to select 1st column's cell after scrolling down(using mouse scroll).
Screenshot2 - overserved that the developer tool does not show information about first column after this issue occurs.

Please let me know if you need more information.

Thanks

[paramvir]

Thanks for the steps, I'm able to reproduce the issue and looking into it.

[paramvir]

you can use this patch ( include after pqgrid js file ) to fix the issue.

Code: [Select]

pq.cRender.prototype.preInit=function(l){var t=this,i=t.isBody(),o=t.that,n=o.options,s=o.eventNamespace,e="pq-table "+t.getTblCls(n),r=["pq-cont-inner ","pq-cont-right","pq-cont-left","pq-cont-lt","pq-cont-tr"];if(l.empty(),l[0].innerHTML=['<div class="pq-grid-cont">',i?'<div class="pq-grid-norows">'+n.strNoRows+"</div>":"",'<div class="',r[0]+r[1],'"><div class="pq-table-right '+e+'"></div>',i?"":'<div class="pq-r-spacer" style="position:absolute;top:0;height:10px;"></div>',"</div>",'<div class="'+r[0]+r[2]+'"><div class="pq-table-left '+e+'"></div></div>','<div class="'+r[0]+r[4]+'"><div class="pq-table-tr '+e+'"></div></div>','<div class="'+r[0]+r[3]+'"><div class="pq-table-lt '+e+'"></div></div>',"</div>"].join(""),t.$cright=l.find("."+r[1]).on("scroll",t.onNativeScroll.bind(t)),t.virtualWin&&$(window).on("scroll"+s+" resize"+s,t.onNativeScroll.bind(t)),i||(t.$spacer=l.find(".pq-r-spacer")),t.$cleft=l.find("."+r[2]).on("scroll",t.onScrollL.bind(t)),t.$clt=l.find("."+r[3]).on("scroll",t.onScrollLT),t.$ctr=l.find("."+r[4]).on("scroll",t.onScrollT),t.$tbl=l.find(".pq-table").on("scroll",t.onScrollLT),t.$tbl_right=l.find(".pq-table-right"),t.$tbl_left=l.find(".pq-table-left"),t.$tbl_lt=l.find(".pq-table-lt"),t.$tbl_tr=l.find(".pq-table-tr"),i){function c(l){l.on("mousewheel DOMMouseScroll",t.onMouseWheel(t))}c(t.$cleft),c(t.$ctr),t.$norows=l.find(".pq-grid-norows")}};

https://jsfiddle.net/4wm8y9q5/

[gopigupta]

The issue can be still reproduced in jsfiddle(https://jsfiddle.net/4wm8y9q5/). I did exact same steps as I mentioned in my previous post.

Error screenshot attached.

Thanks,
Dilip 

[paramvir]

Ok that patch was not applied correctly, please recheck this one.

Code: [Select]

pq.cRenderBody.prototype.preInit=function(l){var t=this,i=t.isBody(),o=t.that,n=o.options,s=o.eventNamespace,e="pq-table "+t.getTblCls(n),r=["pq-cont-inner ","pq-cont-right","pq-cont-left","pq-cont-lt","pq-cont-tr"];if(l.empty(),l[0].innerHTML=['<div class="pq-grid-cont">',i?'<div class="pq-grid-norows">'+n.strNoRows+"</div>":"",'<div class="',r[0]+r[1],'"><div class="pq-table-right '+e+'"></div>',i?"":'<div class="pq-r-spacer" style="position:absolute;top:0;height:10px;"></div>',"</div>",'<div class="'+r[0]+r[2]+'"><div class="pq-table-left '+e+'"></div></div>','<div class="'+r[0]+r[4]+'"><div class="pq-table-tr '+e+'"></div></div>','<div class="'+r[0]+r[3]+'"><div class="pq-table-lt '+e+'"></div></div>',"</div>"].join(""),t.$cright=l.find("."+r[1]).on("scroll",t.onNativeScroll.bind(t)),t.virtualWin&&$(window).on("scroll"+s+" resize"+s,t.onNativeScroll.bind(t)),i||(t.$spacer=l.find(".pq-r-spacer")),t.$cleft=l.find("."+r[2]).on("scroll",t.onScrollL.bind(t)),t.$clt=l.find("."+r[3]).on("scroll",t.onScrollLT),t.$ctr=l.find("."+r[4]).on("scroll",t.onScrollT),t.$tbl=l.find(".pq-table").on("scroll",t.onScrollLT),t.$tbl_right=l.find(".pq-table-right"),t.$tbl_left=l.find(".pq-table-left"),t.$tbl_lt=l.find(".pq-table-lt"),t.$tbl_tr=l.find(".pq-table-tr"),i){function c(l){l.on("mousewheel DOMMouseScroll",t.onMouseWheel(t))}c(t.$cleft),c(t.$ctr),t.$norows=l.find(".pq-grid-norows")}};

https://jsfiddle.net/Lkpsy8vj/

[gopigupta]

Thanks paramvir. Patch has resolved the issue.

Thanks.