Kendo DropDownList fetching new dataItems on pagechange event

[Vincent]

I'm trying to connect an external API that I manage via Tanstack query to a Kendo DropDownList. 

For this I've tried to look at the docs here: https://www.telerik.com/kendo-vue-ui/components/dropdowns/dropdownlist/virtualization

And saw that the DropDownList has a pagechange event that I can listen to to know when I need to fetch new data.
With this knowledge I made the following attempt: 
https://stackblitz.com/edit/yyrbvmlq-pnagnjwj?file=src%2Fmain.vue,src%2FdummyData.ts,src%2Fmain.js,index.html

However there's a problem:

When I scroll down to quick, not all 30 items are fetched and rendered, due to the early return in the pagechange handler function.
If I remove the early return, I run the risk of the same data being fetched multiple times which is also undesirable.

Is there an easy way to ensure all data is properly fetched on pagechange AND the same data is not fetched more than once?
I want both requirements to work nicely, even when the user scrolls down fast, slow, uses the scrollbar handle, pagedown, etc.

Or am I looking at this from completely the wrong angle and is there another, simpler way to achieve what I want?

Thanks in advance

[Yanko]

Hi, Vincent,

I discussed this scenario with our development team, and here is a breakdown of the suggested approach and an example implementation.

Initial Load Size

The initial data load is increased from 1 page to 4 to prevent the DropDownList from rendering empty elements, which would cause it to break.

Data Fetching

The useInfiniteQuery hook is used with two main adjustments. First, the sleep time is reduced from 1000 to 200, as waiting 1000ms to load 5 items was too slow. Second, itemsQuery.fetchNextPage() is performed using a watcher that triggers the query only when it is needed.

PageChange Event

The handlePageChange handler is simplified to a synchronous function that updates the skip ref.

Example

• https://stackblitz.com/edit/yyrbvmlq-8p4vkqfa?file=src%2Fmain.vue 

Please review the demo and let me know if you have further questions.

Regards,
Yanko
Progress Telerik