MudDataGrid inside of a MudDialog

[Kricz]

Bug type

Component

Component name

MudDataGrid, MudDialog

What happened?

When using an editable MudDataGrid (Phase 2 in 8.0.6) inside of an MudDialog (that is showed using IDialogService), the nested dialog of the datagrid will always be shown and it's actually embedded into the dialog itself, rather than using an additional dialog.

Example when EditMode is set to Form:

Even when the EditMode is set to Cell, the dialog is always visible:

Expected behavior

• The dialog of the form edit should not be visible inside of the dialog containing the data grid and use a separate popover - maybe this is a bug with it being an inline dialog?
• The dialog should not be rendered at all, when edit mode is set to cell.

Reproduction link

https://try.mudblazor.com/snippet/GkcwYRQXcrcEwCVM

Reproduction steps

1. Create a MudDialog with a nested MudDataGrid
2. Make the nested data grid editable
3. Show an instance of the dialog using the IDialogService

Relevant log output

No response

Version (bug)

6.0.8

Version (working)

-

What browsers are you seeing the problem on?

Microsoft Edge

On what operating system are you experiencing the issue?

Windows

Pull Request

• [ ] I would like to do a Pull Request

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[marcocram82]

Also happens on chrome

[Kricz]

Is there any way to circumvent this bug? That bug alone makes it impossible for me to upgrade to any version greater than 6.0.7 (where the DataGrid wasn't using an inline dialog). I played around a little bit further and it seems to be a general bug with nested dialogs where the IsVisible property is not working properly: https://try.mudblazor.com/snippet/cYQmYfufSlQxQWdj

[mario-mantese]

Any updates on this issue? I also need nested dialogs in my project...

[ChristophWeigert]

I'm also expiriencing this problem. Is there any workaround? Still got the same thing with 6.0.12.

[nvm-uli]

Same with us. This bug is really a showstopper for us at the moment.

[guillaume-cosson]

Same here

[enkodellc]

I am running into it now as well. Unfortunately on a time crunch so I cannot debug the fix.

[rabyjaycie14]

I'm also experiencing this issue, but with a MudDialog, nested within another MudDialog.

The nested dialog is always shown on the page.

[albazel2004]

You can use the Table component instead here is an example of using both MudDatagrid and MudTable inside a dialog and outside a dialog, in which you can see the difference between MudDatagrid and MudTable behaviors : click here

[CatalinCernea]

Issue still present. Yes you can use a table and the issue won't apper but you lose all the datagrid functionality such as filters on columns. I was able to do a workaround to still use a Dialog and show a MudDataGrid to get the full functionality of it. Just created a custom component similar to a dialog. If someone needs some temporary help until they fix it then I'll be happy to copy paste the code here.

[nvm-uli]

@iColdoCatalin I would really appreciate if you could share your CustomDialog component. Thanks in advance!

[enkodellc]

@iColdoCatalin maybe you could share / add the component it here: https://github.com/CodeBeamOrg/CodeBeam.MudExtensions

[CatalinCernea]

@nvm-uli @enkodellc It is nothing special, just done something simple until they fix it. I tryied to maintain the aspect of the original Dialog and added some cascading parameter in order to invoke the statehaschanged from child component to parent. (its needed for the close button and re-render the page) As I said something simple and quick since I don't have time to maintain the component becouse the guys from MudBlazor will certainly fix it.

Parent component:

`@page "/" @using System.ComponentModel @using System.Runtime.CompilerServices

@inject ISnackbar snackbar @inject IDialogService dialogService @implements IDisposable

Index

Hello, world!

Welcome to your new app.

Open Custom Dialog

@if (showCustomDialogModel.Show) {

}

@code { private ShowCustomDialogModel showCustomDialogModel { get; set; } = new();

protected override void OnInitialized()
{
    showCustomDialogModel.PropertyChanged += (sender, args) => StateHasChanged();
}

public void Dispose()
{
    showCustomDialogModel.PropertyChanged -= (sender, args) => StateHasChanged();
}

public class ShowCustomDialogModel : INotifyPropertyChanged
{
    private bool _show;
    public bool Show 
    {
        get => _show;
        set => SetProperty(ref _show, value);
    }

    public event PropertyChangedEventHandler PropertyChanged;
    void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Equals(storage, value))
        {
            return false;
        }

        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }

    public void ToogleShowCustomDialog()
    {
        Show = !Show;
    }

    public void CloseDialog()
    {
        Show = false;
    }
}

}`

Child component (dialog):

`@using static BlazorServer_TESTING_SOLUTION.Pages.Index @inject ISnackbar Snackbar @inject WeatherForecastService ForecastService

@DialogTitle

@if (forecasts is not null) { }

Close

<MudOverlay @bind-Visible="@showCustomDialogModel.Show" DarkBackground="true" ZIndex="1000" AutoClose="false" />

@code { [CascadingParameter] private ShowCustomDialogModel showCustomDialogModel { get; set; }

[Parameter]
public string DialogTitle { get; set; } = string.Empty;

private WeatherForecast[]? forecasts;
private string _searchString;

protected async override Task OnInitializedAsync()
{
    forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}

private void Cancel() 
{
    showCustomDialogModel.Show = false;
}

}`

[franklupo]

News?