How to create nested in React Dialog

4 Sep 20269 minutes to read

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

Approach

Nesting is achieved by rendering two React Dialog components and pointing the inner React Dialog’s target property to the outer React Dialog’s cssClass selector. Although the two React Dialog components are declared as siblings in JSX, at runtime the inner React Dialog’s DOM is appended to the outer React Dialog container because of the target setting, making it appear nested inside the parent.

Nested React Dialogs rely on the browser’s default z-index stacking. The inner React Dialog is rendered on top of the outer React Dialog. If custom z-index values are applied to either React Dialog, ensure the inner React Dialog’s z-index is higher than the outer React Dialog’s so it remains visible.

Step 1: Render the outer React Dialog

Render two React Dialog components on a page, and set the outer React Dialog’s target property to a container element on the page (for example, #dialog-target).

Step 2: Set the inner React Dialog target

Set the inner React Dialog’s target property to the cssClass selector of the outer React Dialog (for example, .outerDialog). This ensures the inner React Dialog is rendered inside the outer React Dialog at runtime.

[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 Inner Dialog</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 Inner Dialog</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 Inner Dialog</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 Inner Dialog</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;