Handle browser maximum height

[vegarringdal]

Hi again :-)

See you have added native scrolling.
Have you overcome the issues virtual scrolling can get with browser div maximum height?
Usually it will never be a issue for 99.99% of all grids/scrollers since user dont need to see that much data/scroll it.
Just wanted to know because I wanted to add it to my hobby grid project here:
https://github.com/vegarringdal/simpleGrid.
Plan was to try and make it into a custom element, just need to learn A LOT more first :-)

[martingust]

@vegarringdal Not yet. It is on the list of improvements. Right now working on getting array mutations right.

[martingust]

Hope you don't mind I changed the title, want to keep this issue for future reference.

[vegarringdal]

No problem :-)
Maybe wrong place to ask now, with the new title and all, so feel free to delete this post if you feel its on the wrong place
But how is grid getting data from a server?
Will there be a function that gets called so developer know what row the list want data for as user scrolls, something with param for row, and scroll direction?
Thinking how developer controls getting say each 40 and 40 rows from server and caching it client side from server source that contains 50 000 rows.
Usually when list is getting row 20, you might wanto start getting rows 41-80 depending on the direction of scrolling and how long time each row is valid in client cache.
Main reason why I ask is because I will need to figure use a function like that when I get past "hello world" custom elements, hehe, I havent really gotten very far in the new project of getting my grid to be custom element yet.

[EisenbergEffect]

@martingust Status?

[martingust]

@vegarringdal @EisenbergEffect This might work for @vegarringdal last comment #71 (comment)

[vegarringdal]

Hi
Regarding Handle browser maximum height
Biggest problem here is when someone have array length * row height that get to big...

(in my grid, maybe you have done it in a way thats better, and dont have this issue)
With row height of 25px these are the max last time I checked:
Edge/IE11: 61,200 rows , error margin:400
FF: 357,600 rows , error margin:400
Chrome: 1,342,000, rows, error margin:400

What I used to test with...

getMaxRows() {
    //https://github.com/mleibman/SlickGrid/blob/bf4705a96c40fea088216034def4d0256a335e65/slick.grid.js
    var supportedHeight = 10000;
    var testUpTo = navigator.userAgent.toLowerCase().match(/firefox/) ? 8947840 : 1000000000;
    var div = document.createElement("div");
    //div.style.display = "none";
    document.body.appendChild(div);

    while (true) {
      var test = supportedHeight + 10000;
      div.style.height = test + "px";
      if (test > testUpTo || div.clientHeight !== test) {
        break;
      } else {
        supportedHeight = test;
      }
    }
    document.body.removeChild(div);
    var total = Math.ceil(supportedHeight / this.vGridConfig.attRowHeight); //lol
    return total + ", error margin:" + Math.ceil(10000 / this.vGridConfig.attRowHeight);
  }

[leak]

Is there any progress in this area?

The demo http://aurelia.io/ui-virtualization/ still seems to suffer from the div height limitation. If I add 200k rows in Chrome (Vivaldi) and scroll to the bottom I get a blank area.

[AStoker]

@leak, there hasn't been progress made, but we'd love help from the community!
We haven't nailed down a solid way to solve this problem yet, so any idea you have would be greatly appreciated.

My current thought process for solving this is to some fancy tracking with ratios. Basically, once we reach a certain height (items * individual item height), the browser's scroll wheel will already be at it's minimum size. At that point, it doesn't matter visually if more items are in the list or not, so it's at that point that we stop adding buffer heights to the window (since that's whats causing the problem) and start using some fancy ratio work (thinking a bit about this as I type).

Once we reach our maximum browser height, when we're scrolling down in the list, we can't just remove buffer height on a per item basis (scrolled 5 elements down, 5 elements worth of buffer height goes to the top buffer), instead, we use a fraction (depending on our browser/item height ratio) of the buffer height to move to the top, simulating us scrolling through a larger list than we actually are showing.

Does that kind of make sense? That's at least where we are at currently. Again, any help would be greatly appreciated.

[leak]

Haven't really seen a solution yet that doesn't have issues.

This is performance-wise probably one of the best I've found so far, it seems to use some virtual paging:
http://jsfiddle.net/SDa2B/263/

Small problem though, if you click on the free area of the scroll bar for scrolling, the thumb starts jumping.

**edit
Actually it also seems to jump when using the arrows.

[AStoker]

Nice. If you're interested, you could make a branch and try implementing that in there, see if we can't get some movement on that.