I have been trying to implement infinite scroll on DropDownList component, using virtualization, because it's the only way to track scrolling. When I reach the end, of the DropDownList's items, I make a request to the server, and load new chunk of data, and add this new data to existed. In my case, the property virtual.total is based on the items length. But when I get new items, the length of the items increases, and accordingly virtual.total changes, that leads to resetting position of the scroll bar to the top of the popup.
I have already found the place in the source code, where is it going, and I have found the only one way to fix this problem so far. It's changing componentDidUpdate method of the DropDownList.prototype directly, but it is very bad practice..
Are there ways to implement these changes in other way?
1 Answer, 1 is accepted
Thank you for the details.
If the desired result is to achieve a infinite scrolling, I can suggest the following:
1) Wrap the DropDown inside a div and add an onScroll event handler to it.
2) Inside the event check if the scroll is at the bottom and append the new data. This will not reset the scroll position.
Please take a look at the example showcasing this:
https://stackblitz.com/edit/react-e6ugkn?file=app/main.jsx
I hope this approach will help the achieve the desired result.
Regards,
Stefan
Progress Telerik