fix: Columns not vertically aligned in FluentUI DataGrids

[BartvDijk]

🐛 Bug Report

In the Fluent UI DataGrid i'm trying to allow for the dynamic adding/removing of columns. When doing so, the columns are no longer vertically aligned: individual cells are replaced chaotically. I notice the same behaviour in the FluentUI-blazor.net example, when using MS Edge: https://www.fluentui-blazor.net/DataGrid#typicalusage (Under Typical Usage -> click on chevron-down in the column header -> hit the refresh button)

💻 Repro or Code Sample

From the link: https://www.fluentui-blazor.net/DataGrid#typicalusage

Under Typical Usage -> click on chevron-down in the column header -> hit the refresh button

🤔 Expected Behavior

Aligned columns, headers and it's datacells with the same horizon positioning and width

😯 Current Behavior

cells are no longer placed directly beneath it's headers, cells are also not aligned in respect to each other

🔦 Context

I'm building a columnpicker to use in conjunction with the fluent ui datagrid. Adding or removing columns results in the aforementioned bug.

🌍 Your Environment

Windows 11 PRO, Microsoft Edge

• OS & Device: [Windows 11] on [PC]
• Browser [Microsoft Edge]
• .NET and Fluent UI Blazor library Version [8.0.6 and 4.9.1]

[Jan-Henk-Edens]

+1

[vnbaaij]

There are 2 different things happening here: 1) The effect you are seeing om the demo site 2) The effect you are seeing in you own code when adding/removing columns.

On 1: Occasionally the initial set GridTemplateColumns value gets mixed up when there are multiple resizable grids on one page. I'll try to make that process more resilient.

On 2: This one I can't investigate as there is no reproduction code provided (yet). What I suspect is happening is that you set GridTemplateColumns parameter when the initial grid is created. The grid's JavaScript reads this initial value on initialization and restores it when the reset method is executed. When adding/removing columns, the GridTemplateColumns may or may not be updated but the end result is the initially stored value does not correspond to the current grid setup. If you then reset, the value set will not represent the actual situation and rendering will go do its own thing.

I'm not really sure how to solve this. Would reset also remove added columns or add removed columns again? If not, what to reset to then?

[Quantumf0x]

+1

[f4n0]

+1

[vnbaaij]

Guys come on. What are you all '+1'-ing to?

That this happens on the demo site? I already confirmed that in my previous reply. That this happens in your own code? Then give us reproduction code please (as also requested in my previous reply!) And also answer the questions I asked in my previous reply

The +1 are not really helping at all.

[BartvDijk]

Thanks for your quick reponse. I noticed the reset-button on the demo-site, figured i could use whatever handle it had, to fix my own issues. When that didn't work as expected, i assumed it might be the same underlying issue. Sorry, didn't mean to draw a spotlight on it.

Concerning GridTemplateColumns, I did try using this parameter, to force a column-width based on the amount of columns. Either that or the Width-parameter on the Column. Setting it, or not, did not make a difference regarding the vertical alignment.

Edited to delete code

[vnbaaij]

Hi @BartvDijk, Bart,

Can you post a zip of a project that I can run locally? Cutting, pasting and then guessing what's missing isn't really efficient

[BartvDijk]

Can't share the project sadly. 'Fixed' the issue by forcing a re-render of the table.