Fluentui: DetailsList - infinite-scroll

[gbminnock]

Question

I want to implement infinite scolling on DetailsList. I see that there is a sample _"Advanced DetailsList of 5000 items" link which does seem to have infinite scrolling but I cannot see how that is working.
Thanks

[aditima]

Hi @gbminnock, the core idea here is if you have a long list of items to render (like 5000 in this example), we only render a subset of the items to fill the visible window to the DOM. As you scroll down to reveal newer items, newer pages are added to the DOM while old pages (that are now outside the visible window) are removed.

To see this in action, inspect the list in the browser debugger and look at the children of the 'ms-List-surface' element. You will see a bunch of 'ms-List-page' elements. Now, as you scroll, you should see these pages constantly updating.

Hope this answers your question.

[gbminnock]

Hi @aditima, thanks for the info. I'll check 'ms-List-page' elements out in the morning.

My list has 100,000 items which I'll retrieve using odata (paged results).
Using your information, I think I'll need to detect when the user is on the last "page" and call for more data.

I could do it like this for example:

1. Add an entry to each record as I read them in .i.e. rowIndex=0, rowIndex=1 and keep a global count of totalIndexRowCount.
2. Check the index of the row using onRowDidMount (am I near the last record).
3. If 2 is true then call for more data
4. Add the response data to my items:any[]

does this look like a good approach? I am unsure of how the underlying mechanics would work if I suddenly add records in this manner.

Many Thanks,
Gary

[gbminnock]

Ok @aditima,

I have observed the 'ms-List-surface and 'ms-List-page' working today.
This automatically scrolls/pages through the items. I tried adding new items to the items array; however it doesn't update the rendered list. I can see from debugging that the items are there but not rendered.

I tried using componentRef on DetailsList to force an update however I get the error:

Uncaught TypeError: this._forceListUpdates is not a function

Any thoughts on how I can add items to the list and have it render?
Thanks,
Gary

[aditima]

Hi @gbminnock - you should not have to forceUpdate manually. Here's a strategy you can use:

• Have a wrapper component with the items[] array in its state
• initialize the items[] array with the first page of data, and when you know a next page exists, insert a placeholder 'missing' null item at the end of the array.
• DetailsList when encounters the missing item, will call this callback method onRenderMissingItem
• Provide an implementation of onRenderMissingItem that fetches more data and updates the items[] array in the wrapper component's state that forces a re-render of the DetailsList with new items[].

You can look at the DetailsList Advanced example too.

Hope this helps!

[brphelps]

@aditima -- I'm looking at usages of onRenderMissingItem, and from a flux consumer pattern this seems to be rather strange. This method is invoked during normal render, which I think surprises normal flux approaches to action dispatch (e.g. I don't want to be sending an action as part of a render loop).

Is there a corollary to this that doesn't require data modification / render loop action dispatch? I was expecting to see something based on scroll position firing a callback outside of the normal render loop.

[stale[bot]]

This issue has been automatically marked as stale because it has not activity for 60 days. It will be closed if no further activity occurs within 14 days of this comment. Thank you for your contributions to Fabric React!
Why am I receiving this notification?

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Fabric React!
Why am I receiving this notification?

[sirius210]

Hi, sorry to reopen this issue but I face to a similar problem and I don't find a lot of doc about this.

@aditima I have followed the mentionned strategy but I face to a problem. The onRenderMissingItem is always triggered even if I don't scroll to the last row.

I also took a look at the advanced example but it seems that the "null" row had been forgotten. When we take a look at the prototype _onRenderCell, it seems that a "null" row is absolutely needed in order to trigger the onRenderMissingItem.

I have more followed the strategy https://codepen.io/dzearing/pen/EgqMZq but unlike what happen in this example, I have the onRenderMissingItem which is automatically triggered.

Any idea ? How to trigger the next call when we scroll down and not automatically ?

[gbminnock]

@aditima adding the null entity worked for me in the end allowing me to use infinite scroll - works extremely well.
tks

[bva999]

@gbminnock what you mean "adding the null entity"? could you show your sample code please?

[KevinTCoughlin]

@gbminnock what you mean "adding the null entity"? could you show your sample code please?

I believe this is a reference to a workaround mentioned by @aditima above

initialize the items[] array with the first page of data, and when you know a next page exists, insert a placeholder 'missing' null item at the end of the array.

So it seems that the suggestion is to push a null value onto the Array of items.

[canmenekse]

I encountered a similar issue that @sirius210 mentioned.
The onRenderMissingItemis called quite a lot for some reason. It is called multiple times after scrolling to the bottom.

I think In the codepen shared above, it doesn't call it as much because every call adds quite a lot of items

But if I limit the number of items returned from reddit API with the limit query parameter, you can see that it is calling onRenderMissingItem quite ahead of the time

here is a codepen with limit 5 that shows this issue if you scroll slowly you are going to see onRenderMissingItem called quite a lot of times.

Is there a way/work around to avoid that behaviour? It tries to gather data too frequently with this method

Thank you!

Edit: what might be happening is when the list virtualizes it does render couple of items ahead and so if there is a null that gets rendered in the DOM but not shown in the viewport that is still triggering the onRenderMissingItem.