"Blank content" when scroll fast in ui-grid

[clevpuche]

I'm trying to create my own component using ui-grid (3.0.0-rc21) as base.
I'll to work with a lot of columns (500+) and with a lot of rows (100.000+) and I notice one problem: when you scroll fast (horizontally and vertically), for one moment, the "content" of grid is staying blank, and then the content is rendered, giving the feeling of slowness.
See the example in http://ui-grid.info/docs/#/tutorial/191_horizontal_scrolling

I've tried to use "virtualizationThreshold" and "columnVirtualizationThreshold", without success.

Is there any way to increase grid performance?

If the answer is "no", see how jqxGrid works: it "freezes" the grid content when you scroll fast and only render it when the content is "ready" to be rendered. See http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/#demos/jqxgrid/deferredscrollinglargedata.htm, clicking on "Deferred Scrolling on a Large Data Set" in the left-side menu.

Is there any way to implement something like this?

[c0bra]

@cleversonpuche That feature would be doable, but I think it will require a lower-level architecture discussion.

See here for a quick comment on the problem with visibly showing excessive amounts of data from a cognitive point of view: #2810 (comment)

Telerik's Kendo Grid solves this problem by fixing the rows in place and swapping the data in and out past a certain scroll speed, so the grid is not visibly scrolling but you perceive it as doing so due to the data changing.

If deferred scrolling really is the best option then we could definitely look at implementing it in 3.1 or 3.2.

[Biraja-Github]

@c0bra : what is the status for deferred scrolling ? also please let us know what is the release date of 3.2 version.

[csvan]

Getting quite desperate for a solution to this, and would happy contribute to one. It's even worse in our case (though we display <1000 rows) - not only is there a tangible white space when scrolling, but at times the entire grid goes entirely blank and needs a scroll event to render.

I feel we have tried pretty much everything except for modding the sources themselves. Tried setting virtualization threshold (no luck), tried overriding cell templates to strip out as many filters/watchers as possible, etc. Nothing solves it.

I guess I would have to study the rendering cycle a bit close to see what could be done. However, the Kendo solution mentioned by @c0bra seems very sensible.

[mportuga]

@csvan we are certainly willing to accept PRs if you have the time to do it. A lot of the original ui-grid is currently not available. At the time the people who are active, are mostly concentrating on reviewing and merging PRs and some fixes or updates here and there. But this one in particular seems like a heavier undertaking.

[jgunderson-IAS]

@csvan We're experiencing a similar issue where the grid goes completely white when scrolling even on grids with 100 rows and no extra watchers. We have async data loading and found the issue is fixed if we don't init the grid until the data has been returned.. something like ng-if="gridConfig.data.length". It seems like UI grid is thinking the virtualization thresholds is 0 or it's calculating the height as zero because the data array is empty at first and so the virtualization is off. I haven't found a way to update the grid after it's loaded like the gridRefresh method to fix this particular issue. Hopefully that helps you.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because it has not had recent activity. If you believe that this is still an issue in the latest version, feel free to re-open it. Thank you for your contributions.

[Radhika-SuriyaPrakash]

Hi Stale,
in my project i'm using ui-grid, i'm facing the above mentioned problem. Is there any solution for this issue.

thanks,