Search results

Create Nested Dialog

A Dialog can be nested within another Dialog. The following sample contains parent and child Dialog (inner Dialog).

Step 1:

Create two dialog elements with ID #dialog and #innerDialog.

Step 2:

Initialize the Dialog as mentioned in the below sample.

Step 3:

Set the inner Dialog target as #dialog.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton @onclick="@OnClicked">Open Dialog</EjsButton>
<EjsDialog ID="dialog" @ref="DialogObj" ShowCloseIcon="true" Width="400px" Height="300px" >
    <DialogTemplates>
        <Header> Outer Dialog</Header>
        <Content><EjsButton @onclick="@OnBtnClicked">Open InnerDialog</EjsButton></Content>
    </DialogTemplates>
    <DialogPositionData X="Center" Y="Center"></DialogPositionData>
</EjsDialog>
<EjsDialog ID="innerDialog" @ref="InnerDialogObj" Target="#dialog" @bind-Visible="@Visiblity" ShowCloseIcon="true" Width="250px" Height="150px">
    <DialogTemplates>
        <Header> Inner Dialog</Header>
        <Content> This is a Nested Dialog</Content>
    </DialogTemplates>
    <DialogPositionData X="Center" Y="Center"></DialogPositionData>
</EjsDialog>

@code {
    EjsDialog DialogObj;
    EjsDialog InnerDialogObj;

    private bool Visiblity { get; set;} = false;
    private void OnClicked() {
        this.DialogObj.Show();
    }
    private void OnBtnClicked() {
        this.InnerDialogObj.Show();
    }
}

The output will be as follows.

dialog