fix: Column filter overflow in FluentDataGrid

[stephenrichardson]

🐛 Bug Report

Example1.razor: When you have two FluentDataGrid's with overflow-x: auto; and overflow-y: hidden (so that the table will scroll when the width is exceeded), and the column filter popup has a height that is larger than the data grid height, the popup will not escape the data grid.

Example2.razor: When you have two FluentDataGrid's stacked on top of each other and the column filter popup has a height that reaches the 2nd datagrid, the column headers of the 2nd datagrid show on top of the filter popup.

💻 Repro or Code Sample

See attached solution. Example1.razor and Example2.razor as described above

Sandbox.zip

🤔 Expected Behavior

Example1.razor: The column filter popup should escape the data grid.
Example2.razor: The column filter should appear on top and in front of any other components like the 2nd datagrid's column headers.

😯 Current Behavior

Example1.razor: The popup does not escape the datagrid.
Example2.razor: The column headers of the 2nd datagrid show on top of the filter popup.

🔦 Context

I want a page that can contain multiple FluentDataGrid's inside a FluentCard (for aesthetics). The data grid should show scroll horizontally when required (eg. when using mobile or when there are lots of columns). The data grid should grow in height based on number of rows. The data grid columns should be filterable. Sometimes the column filter may have a height that spans a number of rows.

🌍 Your Environment

• OS & Device: Windows desktop
• Browser Google Chrome
• .NET 8.0 and Fluent UI Blazor library Version 4.13.1

[vnbaaij]

Example 1:

For now we cannot make this combination (Card with DataGrid) work in the scenario that you want.

The way the grid's html is being generated positions the options menu always inside the card and thus the card dimensions will grow. I understand that it is a desirable wat of displaying the grid but it would require too much rework to get that going.

Example 2:
This can be solved by setting the UseMenuService parameter on both grid to false. The table header cell will then not have a z-index value being set.

I'm closing this one because we do not plan to support the example 1 scenario in the foreseeable future