Search results

Create Nested Dialog

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.

Source
Preview
index.tsx
index.html
styles.css
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import * as ReactDOM from "react-dom";

export class Default extends React.Component {

public dialogInstance: DialogComponent;
public innerDialogInstance: DialogComponent;

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

public nestedbuttonClick = () => {
    this.innerDialogInstance.show();
}

public onOverlayClick = () => {
    this.dialogInstance.hide();
}

public render() {
    const effect: any = { effect: 'None' };
  return (
  <div className="App">
    <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>

    <DialogComponent id='outerDialog' header='Outer Dialog' showCloseIcon={true} width='400px' height='300px'
        ref={dialog => this.dialogInstance = dialog!} target='#container' 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'
    content='' ref={dialog => this.innerDialogInstance = dialog!}
    animationSettings={effect} closeOnEscape={false} target='#outerDialog'> This is a Nested Dialog </DialogComponent>
  </div>);
}
}

ReactDOM.render(<Default />, document.getElementById('container'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dialog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#innerButton {
  margin-left: 18px;
}