Search results

Create Nested Dialog in Vue Dialog component

14 Apr 2021 / 2 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.

Copied to clipboard
    <div id="target" class="col-lg-12 control-section" style="padding:10px;position:relative;">
        <ejs-button id='dlgbtn' v-on:click.native="buttonClick">Open Dialog</ejs-button>

        <ejs-dialog ref='dialogObj' :visible="true" header='First Dialog' showCloseIcon='true' :animationSettings='animationSettings' width='330px' height='260px'
            target='#target' content='<p>This is the first dialog and acts as a parent dialog, you can open the second (child) dialog by clicking "Next".</p>' :buttons='dlgButton' :open='dialogOpen' :close='dialogClose'>

        <ejs-dialog ref='secondDialog' :visible="false" header='Second Dialog' :isModal='isModal' showCloseIcon='true' allowDragging='true' :animationSettings='animationSettings' width='285px' height='215px'
            target='#target' content='<p>This is the second dialog and act as a child dialog.</p>' :buttons='dlg2Button'>

    #dlgbtn {
        margin-right: 5%;
    .control-section {
        height: 100%;
        min-height: 340px;
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;

import Vue from "vue";
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';


export default {
    data: function() {
        return {
            dlgButton: [{'click': () => { this.$;}, buttonModel: { isPrimary:'true', content: 'Next' }}],

            dlg2Button: [{ 'click': () => { this.$refs.secondDialog.hide(); },buttonModel: { isPrimary:'true', content: 'Close' }}],

            animationSettings: { effect: 'None' },
            isModal: true,
    methods: {
            buttonClick: function(args){
            dialogClose: function() {
            dialogOpen: function() {