fix: vertical scrolling in FluentDataGrid with lots of columns

[vpetit-reimagine]

🐛 Bug Report

When using FluentDataGrid with a lot of columns (that take more horizontal space than the current screen resolution), it is impossible to scroll down vertically from the right of the screen.

💻 Repro or Code Sample

Please use the attached project as a showcase example.

1. Open the page and scroll horizontally to the right of the screen (first left column should not be visible anymore)
2. Vertically scroll (mouse/touchpad/scrollbar)

🤔 Expected Behavior

The table should display new rows as usual

😯 Current Behavior

The table does scroll but no new rows are displayed until you scroll back to the left of the page

🔦 Context

• We are using Virtualize and a lot of @if (_columns.Contains("ColumnName") to determine which columns to display (user selected)
• We have a table with ~4k rows and more than 20 columns
• They also contain other fluent elements (not needed to reproduce the issue)

🌍 Your Environment

• OS & Device: Windows and Linux
• Browser Microsoft Edge, Chrome, Firefox
• .NET and Fluent UI Blazor library Version: 8 and latest FluentUI version

FluentUiDataGridDemo.zip

[vnbaaij]

Ok, I looked and see two issues with your code...

1. You cannot use both Virtualize and MultiLine at the same time. It is a requirement of the standard Blazor Virtualize component that each item (in this case a row) needs to have the same height. You can set that height with the ItemSize parameter (int for number of pixels, defaults to 32).
2. https://www.fluentui-blazor.net/datagrid#displaymode When using Virtualize (assuming point 1 above is resolved), we highly recommend using the Table display mode.

The table does scroll but no new rows are displayed until you scroll back to the left of the page

That was exactly why this mode was introduced...To get the layout you have now, make sure to set the Width parameter on every column!

After changing the DataGrid to:

  <FluentDataGrid TGridItem="MyItem" Items="@(_myItems.AsQueryable())"
                    Virtualize="true"
                    GenerateHeader="GenerateHeaderOption.Sticky"
                    DisplayMode="DataGridDisplayMode.Table">
:

scrolling works perfectly well. Only thing is it also scrols back horizontally but that is not something we can change at the moment. It is caused by Virtualize component.

[vpetit-reimagine]

It seems that it was indeed the issue with both Virtualize and Multiline. Isn't there a way to enforce that if both are provided, that it is considered as an error and doesn't compile? (To make sure that not only it is part of the documentation, but that we do not forget about it).

OTOH, I do not experience the horizontal scrolling when scrolling down (on the page of the project where the issue arised). Could be because something else that actually makes it stay there, which is totally fine for us!

Thanks for taking the time to look at this (non-)issue :)

[vnbaaij]

For compile time checking, I think it can only be done be creating an Analyzer (which is out of my expertise area). I'll add a runtime check by lookin at the parameters in OnParametersSetAsync() and I'll add a line to the XML code comment so it will let you know in the tooltip: