Scrolling very slow when lots of columns

[Cadrach]

Hi,

I have the following issue displaying a "large" data set: 101 columns and 100 rows (The number of rows could be higher, but the issue arises with a hundred)

Basically, when you scroll horizontally it gets super laggy, the table becoming white for a few seconds and the scrollbar not responding at all. After that the table is able to draw, but it makes navigation really difficult.

My initial solution for this was to set the config option columnVirtualizationThreshold to the number of columns of my table: columnVirtualizationThreshold: $scope.columns.length.

This solved the issue when scrolling horizontally, although now it is the vertical scrolling that has the same kind of issues, but not as important (less laggy, but still some white blocks and scrolling does not feel "smooth").

You can check it on this plunker: http://plnkr.co/edit/e984mLFqa9o8XZqnGXEm?p=preview It is worse on my project with custom cell & edit templates.

Thanks a lot for your time, having a blast using the library so far :)

[PaulL1]

For me, that plunker is working fine both horizontal and vertical. What browser/OS combination do you have?

[mikila85]

For me it works fine as well when scrolling slow, but when scrolling faster (more than 20 columns) it needs to load and the grid becomes white. i think its because not all the grid is drawn to save memory only parts that need to be rendered are being rendered to be able to "display" a very large grid.

try doing the same amount of data u put here with ng-repeat on a table without ng-grid, nothing would move even with 1/4 of this amount because of all the watchers.

which brings a good question, the ui-route handles watchers differently, is there a way to tell ui-grid to render all the grid as is without rendering just what it needs?

[Cadrach]

@PaulL1 I am having the issue on Win7/64, Chrome Version 41.0.2272.53 beta-m Also, you need to go full screen (show as many columns as possible on screen)

@mikila85 If you play with columnVirtualizationThreshold and virtualizationThreshold you can force the lib to display the full table, but then if you have lots of data you will encounter all the caveats of having lots of watchers on a page, and you will lose a lot of responsiveness which is the strength of ui-grid through virtualization.

[PaulL1]

It seems to go a bit better if you drop the plugins. For me it's not overly bad either way, but if I go fullscreen and then scroll vigorously I do get a brief flash of blank screen. It catches up pretty quickly though.

One of the things I notice on my browser is that the grid is higher than my screen, so it is scrolling both the inside of the grid, and then also the browser up and down. When I reduce the height to 500px then the performance I get is a bit better.

I think the underlying problem is that in this plunker you're rendering 12 columns wide by about 30 columns tall, or 360 cells, and for each of those cells you're rendering an editable directive plus some watchers and other bumpf. There's probably things we can look at in performance, but what you're asking is quite a lot of any browser.

[PaulL1]

This is a useful request, but not really in the current roadmap. We have far too many good ideas in the repository already, giving the impression that we have a project riven with defects.

Accordingly, I am leaving the enhancement tag on this, but closing it. If someone would like this functionality, we'd welcome a pull request that adds it.

[Biraja-Github]

Hi @PaulL1 ,

First of all, thanks for this awesome Grid. I have a grid with 256 columns with complex celltemplates(popovers, links, tables, images, hover effects etc). I am facing a lot of performance issue just like @Cadrach . Can you please work on this. I dont want ng-repeat thing while scroll, i want all my data(rows & columns) to be rendered once at time which will cause smooth scrolling(i guess).

Awaiting for earliest response.

Thanks, -Biraj

[rboughani]

I have the same problem with 110 columns, how can i escape this please ?

[marclazell]

any updates on this? I'm facing same issues (100 rows, 50 columns) On Ubuntu 16.04 Chrome/Firefox/IE (VM Win7), MacOX Chrome/Firefox/Safari, Windows 7 64 Bit IE

[joshribakoff]

We have far too many good ideas in the repository already, giving the impression that we have a project riven with defects.

This is in fact a defect. So you would rather give the false impression of stability than to acknowledge the defect. This just feels like you're tricking users into using your grid by closing valid issues. At lest leave this open so people are aware of any issues when choosing which grid to use. No need to trick people into using your grid when there may be other grids out there. Or at least be upfront about limitations like max number of columns your grid supports.

[sokhomhuy]

Hi All i face this problem too i have only 34 columns and it very slow when i am scroll please help me to improve

[sneik108]

I have the same problem. Did someone resolve it?

[umairnow]

I have 11 columns and facing the same horizontal scroll problem. It takes time to scroll or sometime it just stuck. Have anyone solved this issue?

[tonysepia]

I have 7 columns and facing the same behaviour: when I scroll down the grid area is blank, but in a few seconds it gets populated with data. Has anyone had any luck with isolating the problem to anything in particular? Any tips on speeding up performance of the grid?

[suraj3777]

Even I Had the same problem with lagging then I added these two options and it is working fine excessRows: 50, excessColumns:15

what happens is that when you are not using these options the ui-grid does re-rendering on scrolling which makes it slow

for more details check out http://ui-grid.info/docs/#!/api/ui.grid.class:GridOptions

[hanishw]

I could fix the issue by letting watchers fire individually for rows and columns. I was earlier updating gridOptions.colDefs and gridOptions.data together. Then changed it to:

1. gridOptions.colDefs = new settings...
2. $timeout(function() { gridOptions.data = new data... },500, true);

And it works like charm. Obviously, one can adjust timeout values by hitting and trialing out on data and columns length.