How to show Dialog placed in razor component when this razor component is placed in MainLayout from other Razor component?

Question

I'm trying to show a SfDialog that is placed in LogoutModal.razor. This LogoutModal is placed as a component in MainLayout and I want to show this dialog from my NavMenu:

NavMenu.razor:

[CascadingParameter]
MainLayout mainLayout { get; set; }

//Logout
private void OnBtnClick()
{
    this.mainLayout.ShowDialog();
}

MainLayout.razor:

@inherits LayoutComponentBase

<CascadingValue Value="this">
    <NavMenu />
</CascadingValue>

<div>
    <div class="container-fluid py-3">
        @Body
    </div>
</div>

<LogoutModal />>

LogOutModal.razor:

@inject NavigationManager NavigationManager
@inherits LayoutComponentBase 

<!-- Logout Dialog -->
<SfDialog @ref="DialogObj" @bind-Visible="@IsVisible" ID="defaultDialog" Width="350px" 
 Target="#formId" ShowCloseIcon="true" IsModal="true" ZIndex="300000">
<DialogEvents Created="@oncreated"></DialogEvents>
<DialogTemplates>
    <Content> Are you sure you want to sign out?</Content>
</DialogTemplates>
<DialogButtons>
    <DialogButton OnClick="@CloseDialog">
        <DialogButtonModel Content="Sign Out" IsPrimary="true"></DialogButtonModel>
    </DialogButton>
    <DialogButton OnClick="@CloseDialog">
        <DialogButtonModel Content="Cancel"></DialogButtonModel>
    </DialogButton>
</DialogButtons>

@code{
    [Inject]
    IJSRuntime JsRuntime { get; set; }
    SfDialog DialogObj;
    private bool IsVisible { get; set; } = false;

    private void CloseDialog()
    {
        this.IsVisible = false;
    }

    public void ShowDialog()
    {
        this.DialogObj.Show();
    }

    public void oncreated()
    {
        JsRuntime.InvokeAsync<string>("Dialog.onCreated");
    }
}

Does anyone have an idea how to do this?

Thanks in advance

Answer 1

You need to invoke an call to dialog rendered page to show the dialog.

MainLayout.razor:

@code{ 
  //Show logout dialog
  LogoutModal logoutModal;

  public void ShowLogoutDialog()
  {
    logoutModal.ShowDialog();
  }
}

Regards, Indrajith