I am working with a dxDatagrid component in devextreme-vue, and wondering if it is possible (or a good idea) to load data on a row of the data grid after it has reached a certain scroll position, or in other words, once it becomes visible by the user while scrolling.

Here is my idea for the implementation if this helps:

2 data cells in the user's top-most 3 visible rows will make API calls (since mindfulness of how many HTTP calls are made in the browser is paramount, obviously), and if a button is clicked on one of the corresponding rows to open a pop-up, an abortController will fire off to close down those previously triggered fetch requests on the currently visible rows. However, once the user has finished using the pop-up, and its fetch call has been processed, the data grid will pick up where it left off, and continue to load the data that is currently visible to the user within at least the topmost 3 visible rows.

I know this sounds a little unorthodox, and most likely not optimal, but I would like to find at least a better alternative to clicking a button on a specific data grid row to make a fetch call whose URL parameters are strictly bound to the data fields on a specific row.

If this is possible (or a good idea) what would be a good way to approach this implementation? If you have any possible alternatives to this approach, those are welcome as well!

Thanks!