fix: Results jump around when scrolling in FluentDataGrid

[JamesNK]

🐛 Bug Report

I have a data grid with a lot of items and virtualize is enabled. I see bad behavior when I use the mouse wheel to scroll up or down. The position of the scroll bar and the results of the data grid jump around randomly while scrolling.

💻 Repro or Code Sample

1. Clone https://github.com/dotnet/aspire.git
2. Open Aspire.slnx
3. Run the Stress.AppHost project that is in the playground folder
4. The dashboard runs. Click the ... button in the Actions column for the stress-apiservice resource and choose Log message limit. This writes 10,000 logs.
5. Click on Structured logs page and scroll up and down in the data grid.
6. Results jump around while scrolling.

🤔 Expected Behavior

Scroll position and results shouldn't jump around

😯 Current Behavior

I create all the logs, then I scroll up for a while (lots of jumping), then I scroll down (lots of jumping)

datagrid-scroll-jumping.mp4

💁 Possible Solution

I've double checked that grid items have a consistent height: ItemSize="46".
Also, I've check that the GetData is consistently returning the right total item count while scrolling (I assume the overall scroll height is based on this value)

Adding a large overscan to the data grid (i.e. 100) improves scrolling a lot. However, the results will still jump around if you scroll very quickly.

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[JamesNK]

If I add logging about paging to the GetData method and then scroll down:

fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 0, request count: 24, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 6, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 15, request count: 27, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 26, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 43, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 54, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 58, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 67, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 130, request count: 43, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 82, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 90, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 97, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 133, request count: 27, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 119, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 308, request count: 55, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 152, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 334, request count: 43, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 186, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 348, request count: 36, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 218, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 360, request count: 32, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 258, request count: 23, total item count: 10000
fail: Aspire.Hosting.Dashboard.Components.Pages.StructuredLogs[0]
      Start index: 708, request count: 55, total item count: 10000

You can see the start index jumping around.

Logging added here:

Logger.LogError("Start index: {StartIndex}, request count: {RequestCount}, total item count: {TotalItemCount}", ViewModel.StartIndex, ViewModel.Count, logs.TotalItemCount);

[vnbaaij]

You need to use the DisplayMode Table in this situation (as mentioned in the docs). Is that what you are currently using?

[JamesNK]

No. Is this a new setting? I haven't seen it before. Scrolling with virtualize used to work.

I tried DisplayMode="DataGridDisplayMode.Table" but all our grids use fr for column widths and width settings no longer work. For example: https://github.com/dotnet/aspire/blob/2ad77ebd00a7b7a964fdafc1f16922919d087091/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs#L154-L161

What should be used instead for widths? Percentage?

[vnbaaij]

Any normal table sizing should work. The fr only works with the DisplayMode Grid setting. That was the one we supported from the start and that is why it is still the default

[JamesNK]

I'm sure this used to work and I'm trying to figure out when and why it broke. Is this a regression when data grids switched from web components to table/tr/td? That was a while ago, so I'm surprised it's only been noticed now.

I tried percentages to simulate how we specified widths with fr:

GridTemplateColumns="20% 10% 15% 50% 10% 10%" (I assume it doesn't matter they don't add up to exactly 100%, I just changed the fr values to percentages)

• On initial page load the table columns are evenly divided for a second
• Then the table columns follow the percentage widths specified
• When I move my mouse onto the page the columns revert back to evenly divided

The best experience would be the table columns to have correct widths immediately, then not lose them.

Demo:

datagrid-width.mp4

[vnbaaij]

It is not a regression. It is a consequence of the change to using table elements icw virtualize. The effect is more present when the dataset gets larger.
For sizing you should set the width per column (also mentioned in the docs). See https://www.fluentui-blazor.net/datagrid#displaymode

[vnbaaij]

It is not a case of where and when it broke. The standard Virtualize gives this behavior with a large dataset combined with the grid css properties and styling.
What you are seeing in the logging is consistent with what we found and that is why we added the DisplayMode parameter

[JamesNK]

I'm sure this used to work. I tested these grids a lot when I added them a few years ago and I didn't see this behavior with things jumping around. What has changed? Or was I wrong and scrolling never worked well? The ergonomic mouse I use doesn’t have a scroll wheel so I don’t test this regularly and is why I’m so unsure.

Putting widths in the table columns works better.

New problem I noticed: the empty content template no longer spans columns width the new display mode

[vnbaaij]

It never worked well but it is more prevalent when using the mouse wheel to scroll. In general, just dragging the scroll bar works more as it should.

Please create a new issue for the empty content. I won't be able to look at it until end of the month (🏖️)

[JamesNK]

I spent some time reworking code to support percentage sizes and to set the width on columns: work in progress PR

I've now done some more testing and I'm finding lots and lots of bugs. Display mode = table is creating many rendering and resize issues in my app:

• fix: Column size incorrect when mixing percentage and pixel widths in FluentDataGrid #4063
• fix: Empty and loading template doesn't span columns in FluentDataGrid #4062
• fix: [DataGrid] Resize menu item non-functional when using 'Table' display mode #4060
• fix: Opening FluentPopover from overflow causes scrollbars in FluentDataGrid #4064