0

I tried to <Virtualize> a list of a thousand items showing several per row, with display: inline-block. The result in Blazor kinda works, but seems to always leave the last row with the same number of item in it, no matter how many are in the total list. I realized that this makes sense in that Virtualize doesn't know anything about breaking up the items into chunks; it can begin the rendering at any item. Thus, when I view the bottom of the list and dynamically add an item to the list, the list re-renders, re-flowing all the items shown, removing the previous beginning item and again putting the last item (the new one) at the bottom in a row with the same number of items in that row as before. I'd like it to be able to add it after of the last item without reflowing all the items before it.

Demo: Scroll all the way to the bottom, wait for images to load, and click Add. Sometimes it initially adds it properly without reflowing all previous items, but if you keep adding, soon enough it will reflow all items unnecessarily and leave you with a final row with a unchanging number of items in it. Here is the code, focusing on ProductGrid.razor.

Any ideas on how to coax the Virtualize component into allowing multiple items per row with consistent layout as things change? Perhaps we need to make it aware of a "chunk size", though it would be different based on different screens/styles?

Patrick Szalapski
  • 8,738
  • 11
  • 67
  • 129
  • As far as I know you can't tell `Virtualize` which bit of the list to display. I have tried to return the virtualized page after the user has visited an edit form and returns to the `Virtualize` component. – MrC aka Shaun Curtis Mar 22 '22 at 21:20
  • 2
    Are you using `@key` to help the render engine know the changes? – Brian Parker Mar 22 '22 at 23:11
  • An [mre] would help this question. – H H Mar 22 '22 at 23:20
  • @HenkHolterman, here is the [Demo](https://szalapski.github.io/BlazorRerenderReducers/product-grid-demo): Scroll all the way to the bottom, wait for images to load, and click Add. *Sometimes it initially adds it properly without reflowing all previous items, but if you keep adding, soon enough it will reflow all items unnecessarily and leave you with a final row with a unchanging number of items in it.* [Here is the code, focusing on ProductGrid.razor](https://github.com/szalapski/BlazorRerenderReducers/tree/main/Sz.BlazorRerenderReducers/Client/ProductGridDemo). – Patrick Szalapski Mar 23 '22 at 03:19
  • @BrianParker, adding `@key` seems to fix it. I don't understand why, do you? Would you like to add it as an answer? I've added it to the example. – Patrick Szalapski Mar 23 '22 at 03:32

1 Answers1

1

Use @key to help the render engine know what elements have been updated / removed / added. If the render engine cannot figure it out it will redraw the whole screen. @key links the html element to the key provided to assist in the process. When you provide a class instance it compares the reference.

Docs

Brian Parker
  • 11,946
  • 2
  • 31
  • 41
  • I did not expect that `@key` would make a difference, but evidently the internals optimize the rendering further than I thought, seemingly allowing items to be added but not removed. So, as you say, just provide a `@key` whenever you can. – Patrick Szalapski Mar 23 '22 at 16:25
  • Upon further review, this helped, but the previously-shown items get moved to a different position improperly. I've added a new question for this subsequent problem; would you have time to try to answer it? https://stackoverflow.com/questions/72581334/in-blazor-is-there-a-way-to-have-consistent-items-show-when-using-the-virtualiz Thanks in advance. – Patrick Szalapski Jun 11 '22 at 02:37