Implementing infinite scroll => onScroll event on angular flexmonster

posted on May 11th, 2022

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?

6 answers

Public

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:

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?
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.
What grid type do you mainly use(flat, classic, or compact)?
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 ⋅ Flexmonster ⋅ May 16, 2022

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.

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ May 23, 2022

Hello, Pablo!

Hope you are doing well.

Our team is wondering if you had some time to try the suggested approach of listening to the scroll event. Could you please let us know if it works for your case?

Looking forward to hearing from you.

Regards,
Solomiia

Public

Pablo ⋅ May 25, 2022

Yes I worked but as you mentioned it's hard to implement on top of the virtual scroll

Thanks for the response.

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ May 25, 2022

Hello, Pablo!

Thank you for your feedback.

Feel free to contact us in case of any other questions.

Best regards,
Solomiia

Implementing infinite scroll => onScroll event on angular flexmonster

6 answers

Please login or Register to Submit Answer