Create nested Dialog

4 Apr 20222 minutes to read

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

Step 1:

Create two div 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.

CSHTML

<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>
    <ejs-dialog id="dialog" header="Outer Dialog" showCloseIcon="true" created="onCreated" target="#container" height="300px" closeOnEscape="false" width="400px">
        <e-dialog-animationsettings effect="None"></e-dialog-animationsettings>
        <e-content-template>
            <button class="e-control e-btn" id="innerButton" role="button">Open InnerDialog</button>
        </e-content-template>
    </ejs-dialog>
    <ejs-dialog id='innerDialog' showCloseIcon="true" header="Inner Dialog" closeOnEscape="false" content="This is a Nested Dialog" target="#dialog" height="150px" width="250px">
        <e-dialog-animationsettings effect="None"></e-dialog-animationsettings>
    </ejs-dialog>
</div>
<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            var innerDialog = document.getElementById("innerDialog").ej2_instances[0];
            dialog.show();
            innerDialog.show();
        }
    }
    function onCreated() {
        document.getElementById("innerButton").addEventListener("click", function () {
            var innerDialog = document.getElementById("innerDialog").ej2_instances[0];
            innerDialog.show();
        })
    }
</script>

Controller.cs

public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }

}