Data Scroller infinite scroll

UI Components for Angular
MarkL
Posts: 18
Joined: 11 May 2016, 16:28

23 May 2016, 18:34

Hi, I am trying to figure out out to get infinite scrolling working with data scroller but I don't understand how it works from the documentation.
It seems as though each time I scroll the (onLazyLoad) event should get triggered and call my function where I can then use $event to request data from my REST server, but my function only gets called once when the page first loads.

Code: Select all

<p-dataScroller [value]="values" [rows]="10" [paginator]="true" (onLazyLoad)="loadData($event)" [lazy]="true">
Can anyone please tell me what I'm missing or elaborate on how to implement infinite scrolling with data scroller? Thanks

cagatay.civici
Prime
Posts: 18449
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

23 May 2016, 18:41

Do you want to use the scroller of windows or a particular element. Is scrollbar displayed on page load after first execution of load data?

MarkL
Posts: 18
Joined: 11 May 2016, 16:28

23 May 2016, 18:48

I would like to have the scroller on the <p-dataScroller> element. The scrollbar is displayed but it takes a couple of seconds to load the data as there are 1000 items being loaded

cagatay.civici
Prime
Posts: 18449
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

23 May 2016, 18:59

So to confirm, it is inline scroller like;

http://www.primefaces.org/primeng/#/datascrollerinline

But you want it infinite right?

MarkL
Posts: 18
Joined: 11 May 2016, 16:28

23 May 2016, 19:00

Yeah exactly

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

24 May 2016, 15:47

Hi MarkL,

In our live showcase you can add [inline]="true" scrollHeight="500px" to the Datascroller-Infinite and that's what you want.

http://www.primefaces.org/primeng/#/dat ... erinfinite

MarkL
Posts: 18
Joined: 11 May 2016, 16:28

25 May 2016, 17:23

Thanks, I have the infinite scrolling working now. However I am having a problem where the further down I scroll the more it starts to lag and take time to load the rows.
I am making a request to a remote server, and each row is only 10.8kb.

Anyone experience this before or have idea why this is happening?

cagatay.civici
Prime
Posts: 18449
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

25 May 2016, 21:53

I remember that this is a known performance issue of ngFor that we use internally to display rows. I hope that Angular2 team will provide a more efficient ngFor maybe one that does not track changes because I guess it keeps track of changes so causing performance issues for large datasets.

MarkL
Posts: 18
Joined: 11 May 2016, 16:28

26 May 2016, 12:02

Ok but how come it works fine in the showcase no matter how far down I scroll?
I tried doing a similar implementation using local data but still experiencing the same problem.

cagatay.civici
Prime
Posts: 18449
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

26 May 2016, 14:50

Do you scroll for 1000+ rows in showcase? Showcase loads 10 rows each time.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests