Infinite Scrolling Table in AngularJS

6,699 views
Skip to first unread message

Gordon McGuire

unread,
Jan 14, 2013, 9:58:49 AM1/14/13
to ang...@googlegroups.com
Hi,

So I'm looking into using AngularJS for a project at work. We currently use ExtJS, which is ok but kind of ugly. I think I'd be able to recreate most of the ExtJS functionality that we need in AngularJS, except for the infinite scrolling grid. See these examples: http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html http://ext4all.com/post/extjs-4-1-grid-infinite-scroll-in-mvc

I've seen examples of infinite scrolling in AngularJS but they don't really address the problem that if you have a huge amount of data then eventually the browser is going to slow down to stand still. With ExtJS, there's only ever a small subset of data actually being shown, but the user is given the impression that all the data has been loaded.

How would I go about implementing this in AngularJS?

Peter Bacon Darwin

unread,
Jan 14, 2013, 10:00:35 AM1/14/13
to ang...@googlegroups.com
I have a feeling that ng-grid has infinite scrolling built in: http://angular-ui.github.com/ng-grid/#/overview


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

Gordon McGuire

unread,
Jan 14, 2013, 10:10:03 AM1/14/13
to ang...@googlegroups.com
Wow! ng-grid has pretty much exactly what I need in the Server-Side Paging Example. Never noticed before because they don't advertise the infinite scrolling.

Thanks Peter fro pointing that out!

Jonathan Card

unread,
Jan 14, 2013, 12:20:15 PM1/14/13
to ang...@googlegroups.com
Does ng-grid actually have infinite scrolling paged from the server? Its not a feature I thought it had, but I've only ever looked at it casually (BTW. thanks to Tim and Jonathon for this project! Its looking good.). I'm still using a wrapper over SlickGrid to support big data-sets, but would love to use a more Angular-bred solution. ng-grid looks awfully close with the exception of this feature. 

Cheers,
Jon

Gordon McGuire

unread,
Jan 25, 2013, 11:59:26 AM1/25/13
to ang...@googlegroups.com
Hey,

After a little more looking around, it turns out ng-grid doesn't have infinite scrolling :( Kind of disappointing there isn't an Angular way for this yet. I want to have splitters and an infinite grid on one of my apps pages but there just isn't a way to do it in angular. Only other library that does what I need is ExtJS, but I don't think that would play well with AngularJS.

Josh Kurz

unread,
Jan 25, 2013, 12:25:04 PM1/25/13
to ang...@googlegroups.com
This is infinite scrolling in a table with AngularJS. http://jsfiddle.net/joshkurz/yaPK7/ 


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

Ran RanUser

unread,
Mar 13, 2013, 6:49:38 PM3/13/13
to ang...@googlegroups.com
Is Angular still keeping auto-binding references to the lower numbered items.rows that go off screen as you scroll down?  

I just assumed to implement infinite scrolling with no performance issues, the array used by the repeater needs to be constantly maintained to only contain the visible rows (constantly removing lower numbered rows when scrolling down, and removing higher numbered rows when scrolling up.).  So if the scroll area is designed to show 50 visible rows, manage the items array to also only contain approx. 50 items.  

Does Angular still bind/perform dirty checking with items that are off screen?

Thanks!
Reply all
Reply to author
Forward
0 new messages