FluentPopover inside FluentDataGrid

[sutantyo-vr]

Hi,

I built a FluentDataGrid so that each row has a Detail button that users can click to show a FluentPopover with more details, which means I need a separate Popover for each row, and each needs its own boolean to check the open status.

As a test, I extended the Popover example to check a Dictionary<string,bool> _visible instead, e.g.

<FluentButton id="myPopoverButtonl" Appearance="Appearance.Accent" @onclick="@(() => _visible["left"] = !_visible["left"])">
...
<FluentPopover Style="width: 300px;" VerticalThreshold="170" AnchorId="myPopoverButtonl" @bind-Open="@(_visible["left"])">

The above worked fine.

However, when I tried to do the same within a DataGrid, the popover will open, but never close. If I click anywhere on the screen, it looks like it just reopens, so it looks as though something is preventing the binding?

In the end I managed to get it to work using trial and error:

<FluentButton id="@($"popover-{context.Name}")" Appearance="Appearance.Accent" 
                    @onclick="() => _popoverVisible[context.Name] = !_popoverVisible[context.Name]">
...
<FluentPopover Style="width: 300px;" VerticalThreshold="170" AnchorId="@($"popover-{context.Name}")"
                     Open="@_popoverVisible[context.Name]"
                     OpenChanged = "@(() => _popoverVisible[context.Name] = !_popoverVisible[context.Name])">

My guess is clicking anywhere on the screen triggers OpenChanged? Is the above the correct way to implement this, or is there a better way?

Appreciate any help!

[vnbaaij]

I don't have the code by hand (on mobile) , but the Aspire Dashboard uses a popover in the grid to show additional information /links. See in https://github.com/dotnet/aspire/tree/main/src%2FAspire.Dashboard%2F Components how it is done there

[sutantyo-vr]

Thank you, Vincent.

<FluentPopover AnchorId="@id" @bind-Open="context.PopupVisible" VerticalThreshold="200" AutoFocus="false">

So the idea is to add a PopupVisible property on the DataGrid item and use that to control visibility. I haven't given it a go, but that sounds good.

I'm still wondering how OpenChanged actually works. Any idea on how it works? Thanks.