angular-ui / ui-grid

UI Grid: an Angular Data Grid
http://ui-grid.info
MIT License
5.39k stars 2.47k forks source link

Scroll does not work properly when rows are EXPANDED #5211

Open unkarjedy opened 8 years ago

unkarjedy commented 8 years ago

Check first example: http://ui-grid.info/docs/#/tutorial/216_expandable_grid[](url)

1) Expand first 3 rows 2) Scroll down to 200 row

There is a gap in the bottom... It seams that table data height calculation ignores expanded rows height when scrolling.

ui grid 216 expandable grid

after scrolling down

ui grid 216 expandable grid 2

scottwo commented 8 years ago

This is being worked on in #4508. Hopefully, that linked correctly.

vance commented 8 years ago

Indeed, I can reproduce this with only one row, when the row height is larger than the screen, it JUMPS ahead instead of showing the bottom of the row template (in this case, there's nothing there, but it skips showing the end).

Heres a plunkr demonstrating it: http://plnkr.co/edit/kLMMl74UjRXiuS3h0s8x?p=preview

vance commented 8 years ago

I have graphed some variables and added the ability to tag events. We can clearly see the the parts where the yellow line (canvasHeight) jumps to a weird value when scrolling past the expanded row. This may be removing and adding it to the rowCache... but as you can see, there's two values it jumps to. That is odd.

screen shot 2016-05-04 at 11 08 57 am

we can also see a blip of the correct value at the scrolling's peak.

vance commented 8 years ago

Good news and bad news. Good news is, for basic cases, I have a solution for the expandable row miscalculation. The bad news is, this may be a systemic problem, and does NOT fix it if you also use infinite scroll because it has the same flawed assumption that rows are the same height.

We need to compute the proper index based on scrollTop computed agains the actual row height, and not just the count:

in GridRenderContainer.prototype.adjustRows doing this:

var theoreticalRowIndex = 0;
    var currentHeight = 0;
    var i = 0;
    self.visibleRowCache.forEach(function(r){
      if( scrollTop > currentHeight && scrollTop < currentHeight + r.height){
        theoreticalRowIndex = i;
      }
      currentHeight+= r.height;
      i++;
    });

instead of

 maxRowIndex * scrollPercentage

gets rid of the "jumping" at the end of the expandable row.

I'm not sure how to adjust the end range, so just setting rangeEnd = rowCache.length; seems to work.