fix: DataGrid scroll bar when Virtualize = true and scrolling fast.

[StevenRasmussen]

🐛 Bug Report

When scrolling fast (either with the mouse wheel or by grabbing the scroll bar) and the Grid has Virtualize = true, the scrollbar jumps around and does not scroll fluidly.

💻 Repro or Code Sample

Here is a screenshot of the demo site on the Virtualize page. Watch the scroll bar as I use the mouse wheel to scroll down on the page.:

🤔 Expected Behavior

The grid should scroll without the scroll bar jumping around.

[PascalVorwerk]

So I took a look at the code and I think this is being caused by the Task.Delay in the ProvideVirtualizedItemsAsync method.. this delay was made to avoid too many requests when scrolling quickly (as the comments say). If i remove the task delay, the scrolling seems pretty 'fluid' or atleast, it doesn't jump back and forth like you showed:

Bezig.met.opnemen.2025-03-08.223146.mp4

I'm not entirely sure on how we would want to fix this, as i can also see the benefit of trying to avoid too many requests from scrolling. The code comment itself suggests making this configurable or smarter by increasing the delay as the amount of requests increases.

[PascalVorwerk]

@vnbaaij @dvoituron To practice my skills I would love to see if I can improve this! Do you guys feel like this is an issue and do you have a suggestion on what road to take to improve?

[vnbaaij]

@PascalVorwerk yes, it is definitely an issue. I've started looking at it but happy to leave it to you 😉.
My train of thought was to see if in the method you mentioned, I could use our internal debounce code. I managed to get that going today, but unfortunately it does not resolve the problem. So no clue yet on how to approach this.

Other than that, I wanted to check the QuickGrid examples to see if it occurs there as well.

[PascalVorwerk]

Okay so I haven't been able to actually figure out why this bug is happening. I noticed that even when I remove the Task.Delay(), the weird jumping of the skip and limit parameter keeps happening.. For example, this is me scrolling downwards through the grid:

As you can see, between the resolves (this is when i stop scrolling), there is some very weird behaviour happening. I am guessing these are some race conditions and tasks not getting canceled and thus giving the virtualize component a wrong idea of where we are with paging?

I am not sure how to resolve this.. i've tried adding a debouncer with a return value, but it seems like the issue comes from the Virtualize component getting a wrong idea on where we are.

This issue seemed easy... 😝

So far i've tried the following things without any success:

• Removing the Task.Delay, but this simply results in more requests. The main issue happens when a user rapidly scrolls, probably quicker then the API can respond. Then after waiting for a bit and continuing the scroll, u can see the index is way off the last received result.

• I've tried on several points to add the DebounceAction for example on the point where we actually retrieve the items, however with no better results.

Overall, my guess it's happening because of race conditions and tasks not being cancelled. Look at the requests being fired if i repeatedly scroll without a task.delay(100) added:

Maybe it's wise if @vnbaaij or @dvoituron takes this over hehe

[PascalVorwerk]

Okay, you can especially see it happening if you add the indexes that the ItemsProvider is giving back with each item to the food recall provider. This is without any changed code, except for adding the indexes to the remote data table:

Bezig.met.opnemen.2025-03-10.235824.mp4

I hope atleast some of my findings help a bit

[vnbaaij]

I looked at the QuickGrid sample that uses Virtualize (https://aspnet.github.io/quickgridsamples/virtualizing) and that one is not showing the quirky behavior when scrolling with the mousewheel or by dragging the scroll bar. So that set me on a path to look at the differences between that demo and ours...

Difference is we are using some rendering techniques to be able to use display: grid like capabilities on a HTML table so you can use GridTemplateColumns to set column widths. In general that works super but in this case it does not. There where some other cases earlier already where we needed to make changes because of this and we therefore introduced the DisplayMode parameter.

When using DisplayMode=DataGridDisplayMode.Table, we render the HTML table and its child components (tr, th, td) as pure HTML elements. You can't use the GridTemplateColumns parameter (well you can, but it will be ignored) and need to set the widts by using the Width parameter on the columns.

In this case it is needed to use the DataGridDisplayMode.Table as well. Once the sample is changed to use this, the rendering will be as it is supposed to be:

Only thing is that in the current version the table does not automatically take the width of its container yet. For the next release I'm making a change that will add that automatically (and also won't output the gid-column in the header cells).

So to get the example to behave as it should (with the current version), just change the FluentDataGrid declaration to:

<FluentDataGrid @ref="grid" Items=@items Virtualize="true" DisplayMode="DataGridDisplayMode.Table" style="width: 100%;" ItemSize="54" GenerateHeader="@GenerateHeaderOption.Sticky">

[PascalVorwerk]

Oh wow! Interesting. So I guess we also need to document that in order to use "Virtualize" , the display mode should also be set to Table and that will be that.

[vnbaaij]

Correct. Already working on the docs. PR will be posted somewhere later today