ui grid performance issue with celltemplates

Question

I am using angular-ui-grid 3.1.1 with 25,50,75 records at a time. Each cell is having different celltemplates e.g, onclick popovers, hover popovers, file download links, data with profile images, data in nested table etc. Data is rendering fine in the grid, however for some seconds ui grid becomes unresponsive.

Also i have created an external column chooser. While choosing a column to show/hide, the grid becomes unresponsive for some seconds.(same unresponsive behavior seen with in-built column chooser provided by ui-grid)

Please suggest any fix for this.

Lethargic

Can you post the grid options you have enabled? – Propaedeutic

Are you load data from your server all at once or making a call with 25,50,75 requests? – Mendicity

I am using pagination with 25/50/75 records at a time. – Lethargic

can u create a plunkr demonstrating your problem ?? – Rumor

Wherever possible use ng-if instead of ng-show/ng-hide. Since ng-if actually removes items from the DOM and there are fewer objects in memory it tends to boost performance a lot when there are large numbers of objects involved. I don't use UI Grid, so I'm not sure how much that applies here. – Overset

Can it also be that you're loading your data in a SYNC way, making the grid wait for the data before showing the DOM nodes? A Plunker would be so helpful in these cases – Race

Answer 1

sadly, we've had to abandon UI grid for these same sort of issues. The issue, however was not in UI-Grid but in angular lacking performance. In my case I built a grid with ReactJS that I created a angular JS directive wrapper to put over. Even by just putting angular HTML with lots of rows/columns it wasn't fast enough. The last thing you could try before swapping away from UI-Grid would be looking into row/column virtualization if you dont already have it enabled. Here is the option to test

columnVirtualizationThreshold

Terbium

Answer 2

If you wont change the scope variables, try one-way-data-binding in your templates, it will give you some performance like:

<span>{{::variable}}</span>

IMPORTANT!: Be careful because it wont update data any more until you refresh the view.

Crimpy