Rendering not correct for paramquery pro 3.3.5

[WTC_User]

I have a table in a empty page (no scrollbar initially).
Here, there is a table that show more than 100 rows (so will appear the scrollbar in the page).
When the datas arrives (remote dataModel) last column in the table will partially covered.
If I'll resize the page, the table rendering correctly, but if I'm going to change rPP (for example 10 rows -> no scrollbar) the table show the table background after the last column.

See the posted images

[paramvir]

Your attachments are missing.

Have you tried scrollModel.lastColumn = "auto" or scrollModel.autoFit = true

[WTC_User]

I have uploaded one more here.

Yes, I've setted up those parameters but it doesn't works.

[paramvir]

Your attachments have been received.

Tested this demo: https://paramquery.com/pro/demos33/paging_local and change of rpp.

scrollbar works fine with scrollModel.autoFit: true and various combinations of virtualX/Y: true/ false.

Could you please share a jsfiddle of the issue.

[WTC_User]

Maybe I explained wrong.
The table must be with auto width and flex height and the page must have not scrollbar. When the page increases in height and the page's scrollbar will appear by overflow (for example changing rPP or expanding a row), you can see the rendering problem.

Another problem will appear if you resize the window (to adjust the table render), and then reduce the page height to hide the scrollbar (for example changing rPP or unexpanding a row).

I'll share an example of the issue as soon as possible.

[WTC_User]

I've replicated the problem in a paramquery's demo page.
1) You have to open this demo: https://paramquery.com/pro/demos32/paging_local
2) Paste this code inside the Javascrip editable section
3) Resize the page while its scrollbar disappear (resizing page or changing element height from developer console)
4) Click edit and run
5) execute the action steps to reproduce the error

thanks

[WTC_User]

Could you a accept the attachment in the last comment?

[paramvir]

There seems to be some discrepancy.

In your initial post it's mentioned that issue arises when rPP is changed from 100 to 10.

In your recent post step 3, page scrollbar can't be removed on any page resize and the initial rPP is 1 in your source code.

Please clarify.

Moreover https://paramquery.com/pro/demos32/paging_local is an old version. (v3.2.0)

Could you please check the latest 3 version. v3.4.1

https://paramquery.com/pro/demos33/paging_local

[WTC_User]

Yes Sorry,
first of all, with https://paramquery.com/pro/demos33/paging_local it's the same! So you have to use this one!

The problem there is switching from 1 to 100 and also from 100 to 1...I think it's the same problem!

The problem its depentent to the appear of the page scrollbar after table rendering...the table container resize its width but will be not the same for its columns!

If you proceed with the 5 steps you can reproduce the problem!

NOTE: Its important that the page has not a scrollbar on init!! (lets try to remove any some new line space in the code)

[paramvir]

It's one of those rare boundary conditions which can't be fixed without employing ugly fixes and risking race conditions.

The column widths is calculated based on initial width of grid and grid doesn't know that scrollbar would appear / disappear in the window after grid rendering ( because height is flex ) and thus change the client width which would change the grid width which would require the grid to recalculate the column widths and this cycle could go on foreover thus impacting the performance and it could go into an infinite loop.

You could use this small workaround to refresh the grid whenever rPP is changed.

Code: [Select]

  grid.pager().on("change", function(evt, ui) {
  if(ui.rPP){
    setTimeout(function(){
      grid.refresh();
      })   
    }
  });


[WTC_User]

Okay, that's exactly what I was talking about.

Yes, refresh the view on change rPP wil be a workaround, but only in one scenario!

for example...
On page init the scrollbar there isn't. When a big collection of data arrives (for example if the user has saved rPP=100) fires the render and after the page scrollbar appear...so, the user will see the problem always

[paramvir]

Please ignore that rPP workaround and apply this patch. this patch can be added in a separate file and included in the document after pqgrid js file.

Code: [Select]

//patch
(function($) {
  $(function() {
    function isSB() {
      return (document.body.scrollHeight > window.innerHeight);
    }
    var sb = isSB();
    $.paramquery.onResize(document.body, function() {
      var nsb = isSB();
      if (nsb != sb) {
        sb = nsb;
        $(window).trigger('resize')
      }
    })
  })
})(jQuery)


http://jsfiddle.net/206opqs5/1/

[WTC_User]

This works good!!!
Thanks