Modal dialog not always on front

[Walter Martin]

I'm using blazor server version 18.4.0.40 and I'm trying to show a modal dialog over another modal dialog after pressing a button inside the first dialog.

The problem is that sometimes, the second dialog is showed behind the first so it's inaccessible but not always

What is the best practice to be sure the second dialog is showed on front ?

//first dialog

<SfDialog @ref="dialograpdet" @bind-Visible="dialogdettagli" Width="90%" IsModal="true" CloseOnEscape="true" ShowCloseIcon="true">

//second dialog

<SfDialog @bind-Visible="dialogaddetti" Width="500" IsModal="true" CloseOnEscape="true" ShowCloseIcon="true">

    

public async Task OnCommandClickedDettagli(CommandClickEventArgs<TrapdettagliDTO> args) 

    {

        dialogaddetti = true; //show the second dialog

Attachment: WhatsApp_Image_20210528_at_16.37.47.jpeg_7ad509bb.zip

[Revanth Krishnan]

Hi Walter, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “I'm trying to show a modal dialog over another modal dialog after pressing a button inside the first dialog. The problem is that sometimes, the second dialog is shown behind the first so it's inaccessible but not always. What is the best practice to be sure the second dialog is shown on the front?” 

 

We tried to reproduce the issue by making the sample ‘to open a dialog inside another dialog on the button click’, but the second is shown properly and we couldn’t reproduce the issue from our end. We have prepared a sample for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dialog_Blazor_Application1533573635 

 

The best practice to show the second dialog on the front is to render the second dialog inside the first dialog by setting the ‘Target’ property of the second dialog as the first dialog’s ID when opening the second dialog. Please check the below code snippet for reference, 

 

Code Snippet: 

<SfDialog ID="dialog" @ref="dialograpdet" @bind-Visible="@IsVisibleParent" Width="90%" Height="200px" IsModal="true" CloseOnEscape="true" ShowCloseIcon="true"> 

    . . . 

</SfDialog> 

 

<SfDialog ID="innerDialog" @bind-Visible="@IsVisibleChild" Target="@Target" Width="500" Height="400px" IsModal="true" CloseOnEscape="true" ShowCloseIcon="true" > 

    . . . 

</SfDialog> 

. . . 

@code { 

    SfDialog dialograpdet; 

 

    private string Target { get; set; } = "body"; 

    private bool IsVisibleParent { get; set; } = true; 

    private bool IsVisibleChild { get; set; } = false; 

 

    private void OpenParentDialog() 

    { 

        this.IsVisibleParent = true; 

    } 

 

    private void OpenChildDialog() 

    { 

        this.Target = "#dialog.e-dialog"; 

        this.IsVisibleChild = true; 

    } 

} 

 

If the issue still occurs, can you please share the following details? 

• The whole code snippet of the two dialogs with the button click.
• The exact replication procedure to reproduce the issue.
• The video illustration of the issue reproducing scenario.
• If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing code.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

[Walter Martin]

It works perfectly, thanks

[Revanth Krishnan]

Hi Walter, 

 

Thanks for the update. 

We are glad that the provided solution satisfied your requirement. Please let us know if you need any further assistance. 

 

Regards, 

Revanth