Get Free Trial

Implementing infinite scroll => onScroll event on angular flexmonster

Answered
Pablo asked on May 11, 2022

Im trying to listen to the scroll event on the pivot wrapper for angular, 
I need to detect once the user is about to reach the end, I see no option to listen to this event.
Do you guys have any solution for it?

3 answers

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster May 12, 2022

Hello, Pablo!
 
Thank you for your question.
 
Kindly note that Flexmonster doesn’t support listening to scroll events out of the box. 
 
Could you please specify more details on your case, especially:

  1. Do you want to implement infinite scroll to speed up the time when a user would see the first data, or is there another scenario?
  2. Do you use JSON data source? If yes, do you use Flexmonster Data Server to load the data? In case you use another data source, please specify which one.
  3. What grid type do you mainly use(flat, classic, or compact)?
  4. Please specify the versions of Angular and Flexmonster in your project.

The answers to these questions would greatly help us understand your case better.
 
Looking forward to your response.
 
Regards,
Solomiia

Public
Pablo May 13, 2022

Hey Solomiia,
thanks for the quick answer.

1. I have pagination on the backend side, we have thousands of records per user. to not block the interface I want to request records on demand. no other scenario.
2.we use our API with server side pagination

3. we mainly use flat (for now)
4. we use:
“ng-flexmonster”: “2.8.31”,

“@angular/core”: “~11.2.5”,

I have many workarounds for it but I don’t want to watch for style changes on the DOM

// TODO: finish infinite scroll stuff
const scroll=this.pivot[‘root’].querySelector(‘.fm-scroll-content’);
 
// this works only in horizontal scrolling
 
scroll.addEventListener(‘scroll’, (event) => {
    console.log(‘event’, event);
});
 

// this works but it’s an ugly workaround
 
const observer=newMutationObserver((mutations) => {
mutations.forEach((mutationRecord) => {
console.log(‘scrolled’, mutationRecord, target);
});
});
const target=this.pivot[‘root’]
.querySelector(‘.fm-data-sheet’)
.querySelector(‘.fm-scroll-content’);
observer.observe(target, {
attributes: true,
attributeFilter: [‘style’],
});

In this post (https://www.flexmonster.com/question/onscroll-event-on-flexmonster/) there is a recommendation to use native scroll event, Do you have an example for it?

 

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster 7 days ago

Hello, Pablo!
 
Thank you for the detailed information and code snippets.
 
Please note that Flexmonster uses virtual scroll with its logic for optimizing the performance under the hood. Therefore, implementing the infinite scroll on it can be tricky.
 
Nevertheless, we suggest trying the following approach to listen to both horizontal and vertical scroll events:

const scroll = document.querySelector("#fm-pivot-view .fm-data-sheet .fm-scroll-pane");

scroll.addEventListener('scroll', (event) => {
    console.log('event', event);
});

We have prepared a JSFiddle example for visualization: https://jsfiddle.net/flexmonster/L3pq5o9u/.
 
Hope it helps. Feel free to ask in case of any questions.
 
Regards,
Solomiia.

Please login or Register to Submit Answer