fix: FluentDataGrid inside Modal dialog ignored flags and functionalities

[LucaCris]

Open an IDialogContentComponent derived component with a DataGrid inside in a modal dialog, via DialogService.ShowDialogAsync(), like this:

        <FluentDataGrid Items="@Content.ElementDescs.AsQueryable()" 
                        ResizableColumns="true" ResizeColumnOnAllRows="false" AutoFit="true"
                        SelectionMode="DataGridSelectMode.Single"
                        @bind-SelectedItems="@SelectedItems"
                        Style="width: 100%; height: 600px; overflow: auto;">
            <PropertyColumn Property="@(e => e.SectionName)" Title="@ERes.STR("EDG_SECT")" Sortable="true" />

As you can see from the image:

• ResizeColumnOnAllRows is ignored
• AutoFit is ignored
• Selection is not working

In other projects these flags are ok when the DataGrid is in the main layout (no popup).

[MarvinKlein1508]

@LucaCris can you provide a ready to run repository or working code to copy and paste? We don't have the time to craft together samples for every issue which gets raised here.

[LucaCris]

I need quite a lot of time to setup such thing... In the meantime, somewhat I can check? :)

[vnbaaij]

Try the DisplayMode Table to see if that helps.

Also, I don't think having a resizable grid in a dialog is a good idea. That is not a good case of how a dialog is supposed to be used (in my opinion). I'd suggest you reconsider this UI choice.

[LucaCris]

Hi @vnbaaij . Display as Table will made table horizontally overflow the dialog container. So no luck.

This is the whole App:

The dialog is a list of all elements inside the underlying project. I see no other way to present them, in a SPA WebApp...

[vnbaaij]

It could (should?) potentially just be another page. You just need to maintain the state somewhere.

What do you mean with 'made table horizontally overflow the dialog container'? Is that what I see in the image, ie a scrollbar will be shown. That doesn't look like an issue to me.

[LucaCris]

No, the overflow problem was not shown in my screenshot. The h-scroller disappear and the table last columns are rendered out of dialog right limit. I don't want to manage another page, with state and so on, only for a table not responding to defined properties.

[vnbaaij]

That happens probably because of the styles of the dialog body. You should play with those (especially overflow) in the DevTools

If you want us to take a look at it, you still need to supply us with reproduction code. If you can't supply that in a short time, that is also fine. We will close the issue and can reopen once you have the code ready.

[vnbaaij]

Closed due to no sample provided (yet!)