angular-ui/ui-grid

Noticeable delay when grid columns are altered on large dataset

Open

#4,492 opened on Oct 8, 2015

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (5,395 stars) (2,496 forks)batch import
help wantedseverity: performance

Description

Sample showing a grid with a large dataset: http://plnkr.co/edit/VCjtmkSjEMC59BFGmyT7?p=preview

Click the button at the top to cycle the grid columns being set to include only two, three then four fields. I notice around a 300ms delay until the grid redraws to show the changed headers. This makes the interface feel laggy. Scrolling through the dataset once the headers have updated is smooth however.

On a smaller dataset (comment out the "data = data.concat(data);" line), the rendering delay isn't as noticeable.

Are there any workarounds for this?

Thanks for the great library!

Contributor guide

Tech stack
javascript
Domain
frontendperformance
Issue type
performance
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
3-5 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Familiarity with AngularPerformance profilingui grid internals
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
20
Research direction
Investigate the cause of the rendering delay when columns are changed. Focus on the grid's redraw mechanism, likely in the core rendering files. Use profiling tools to identify bottlenecks. Consider if the delay is due to DOM manipulation or data binding in Angular.
Noticeable delay when grid columns are altered on large dataset · angular-ui/ui-grid#4492 | Good First Issue