FluentDataGrid text wrapping

[geowong2022]

I have a FluentDataGrid set to use Virtualize=true. I read the documentation and see this:

If you use Virtualize, you should supply a value for RowsDataSize and must ensure that every row renders with the same constant height.

However, in my project I need to display multiple columns with long text for some columns. I need to show to the user for the full text, so I need to make sure my grid data is visible to user. In order to achieve that, I use this in site.css:
fluent-data-grid-cell {
white-space: pre-wrap;
}

The data now showing correctly with the text wrapping. However, when I keep scrolling, the grid became flickering non-stop and then it stops loading anymore. May I know how to achieve the grid text wrapping with virtualize (scroll and load data)?

*I am using v2.1.1

[vnbaaij]

Hi, sorry for not getting back earlier (was on vacation).

Unfortunately want you want is not possible. If you use virtualization, all rows have to be the same height. That is the only way the system can precisely position and move to the correct rows.
This is not a shortcoming of the Fluent UI implementation but is a general Blazor restriction when using Virtualize. See https://learn.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-7.0#item-size for more information.