Create nested dialog in React Dialog component

18 Jan 20238 minutes to read

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

Step 1:

Render two Dialog components in a page.

Step 2:

Set the inner Dialog target as .outerDialog.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    dialogInstance;
    innerDialogInstance;
    handleClick() {
        this.dialogInstance.show();
    }
    nestedbuttonClick = () => {
        this.innerDialogInstance.show();
    };
    render() {
        const effect = { effect: 'None' };
        return (<div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
      <DialogComponent header='Outer Dialog' cssClass="outerDialog" showCloseIcon={true} width='400px' height='300px' ref={dialog => this.dialogInstance = dialog} target='#dialog-target' closeOnEscape={false} animationSettings={effect}>
          <button className="e-control e-btn" id="innerButton" onClick={this.nestedbuttonClick} role="button">Open InnerDialog</button>
      </DialogComponent>
  
      <DialogComponent id='innerDialog' header='Inner Dialog' showCloseIcon={true} width='250px' height='150px' ref={dialog => this.innerDialogInstance = dialog} animationSettings={effect} closeOnEscape={false} target='.outerDialog'> This is a Nested Dialog </DialogComponent>
    </div>);
    }
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public dialogInstance: DialogComponent;
  public innerDialogInstance: DialogComponent;

  public handleClick() {
      this.dialogInstance.show();
  }

  public nestedbuttonClick = () => {
      this.innerDialogInstance.show();
  }
  
  public render() {
      const effect: any = { effect: 'None' };
    return (
    <div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
      <DialogComponent header='Outer Dialog' cssClass="outerDialog" showCloseIcon={true} width='400px' height='300px'
          ref={dialog => this.dialogInstance = dialog!} target='#dialog-target' closeOnEscape={false} animationSettings={effect}>
          <button className="e-control e-btn" id="innerButton" onClick={this.nestedbuttonClick} role="button" >Open InnerDialog</button>
      </DialogComponent>
  
      <DialogComponent id='innerDialog' header='Inner Dialog' showCloseIcon={true} width='250px' height='150px'
      ref={dialog => this.innerDialogInstance = dialog!}
      animationSettings={effect} closeOnEscape={false} target='.outerDialog'> This is a Nested Dialog </DialogComponent>
    </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let dialogInstance;
    let innerDialogInstance;
    function handleClick() {
        dialogInstance.show();
    }
    function nestedbuttonClick() {
        innerDialogInstance.show();
    }
    const effect = { effect: 'None' };
    return (<div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
        <DialogComponent header='Outer Dialog' cssClass="outerDialog" showCloseIcon={true} width='400px' height='300px' ref={dialog => dialogInstance = dialog} target='#dialog-target' closeOnEscape={false} animationSettings={effect}>
            <button className="e-control e-btn" id="innerButton" onClick={nestedbuttonClick} role="button">Open InnerDialog</button>
        </DialogComponent>

        <DialogComponent id='innerDialog' header='Inner Dialog' showCloseIcon={true} width='250px' height='150px' ref={dialog => innerDialogInstance = dialog} animationSettings={effect} closeOnEscape={false} target='.outerDialog'> This is a Nested Dialog </DialogComponent></div>);
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App() {
    let dialogInstance: DialogComponent;
    let innerDialogInstance: DialogComponent;
    function handleClick() {
        dialogInstance.show();
    }
    function nestedbuttonClick () {
        innerDialogInstance.show();
    }
    const effect: any = { effect: 'None' };
    return (
        <div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
        <DialogComponent header='Outer Dialog' cssClass="outerDialog" showCloseIcon={true} width='400px' height='300px'
            ref={dialog => dialogInstance = dialog!} target='#dialog-target' closeOnEscape={false} animationSettings={effect}>
            <button className="e-control e-btn" id="innerButton" onClick={nestedbuttonClick} role="button" >Open InnerDialog</button>
        </DialogComponent>

        <DialogComponent id='innerDialog' header='Inner Dialog' showCloseIcon={true} width='250px' height='150px'
        ref={dialog => innerDialogInstance = dialog!}
        animationSettings={effect} closeOnEscape={false} target='.outerDialog'> This is a Nested Dialog </DialogComponent></div>
    );
}
export default App;