Search results

Getting Started

The following section explains the required steps to build the Dialog component with its basic usage in step by step procedure.

Dependencies

The following list of dependencies are required to use the Dialog component in your application.

|-- @syncfusion/ej2-react-popups
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-react-buttons
    |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-buttons

Installation and configuration

You can use Create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app

Start a new project using create-react-app command as follows

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry. You can choose the component that you want to install. For this application, we are going to use Dialog component.

To install Dialog component, use the following command

npm install @syncfusion/ej2-react-popups –save

Adding Dialog to the application

Now, you can start adding Dialog component to the application. We have added Dialog component in src/App.tsx file using following code.

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

export class Default extends React.Component<{}, {hideDialog: boolean;}> {
public dialogInstance: DialogComponent;

constructor(props: {}) {
    super(props);
    this.state = {
        hideDialog : false
    };
}
public handleClick() {
    this.setState({ hideDialog: true })
}

public dialogClose = () => {
    this.setState({ hideDialog: false })
}
public render() {
  return (
  <div className="App">
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)} >Open</button>

      <DialogComponent width='250px' content='This is a Dialog with content' target='.App' visible = {this.state.hideDialog} close = {this.dialogClose}
      ref={dialog => this.dialogInstance = dialog!}  />
  </div>);
}
}

ReactDOM.render(<Default />, document.getElementById('root'));

Adding CSS reference

Import the Dialog component’s required CSS references as follows in src/App.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-popups/styles/material.css";

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components. This web tool is useful to combine the required component scripts and styles in a single file.

Run the application

Now use the npm run start command to run the application in the browser.

npm run start

The below example shows the Dialog.

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

export class Default extends React.Component<{}, {hideDialog: boolean;}> {
public dialogInstance: DialogComponent;

constructor(props: {}) {
    super(props);
    this.state = {
        hideDialog : false
    };
}
public handleClick() {
    this.setState({ hideDialog: true })
}

public dialogClose = () => {
    this.setState({ hideDialog: false })
}
public render() {
  return (
  <div className="App">
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)} >Open</button>

      <DialogComponent width='250px' content='This is a Dialog with content' target='#container' visible = {this.state.hideDialog} close = {this.dialogClose}
      ref={dialog => this.dialogInstance = dialog!}  />
  </div>);
}
}

ReactDOM.render(<Default />, document.getElementById('dialog'));
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>

A modal shows an overlay behind the Dialog. So, the user should interact the Dialog compulsory before interacting with the remaining content in an application.

While the user clicks the overlay, the action can be handled through the overlayClick event. In the below sample, the Dialog close action is performed while clicking on the overlay.

When the modal dialog is opened, the Dialog’s target scrolling will be disabled. The scrolling will be enabled again once close the Dialog.

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

export class Default extends React.Component<{}, {hideDialog: boolean;}> {
    public dialogInstance: DialogComponent;

    constructor(props: {}) {
        super(props);
        this.state = {
            hideDialog : true
        };
    }

    public onOverlayClick = () => {
        this.setState({ hideDialog: false })
    }

    public dialogClose = () => {
        this.setState({ hideDialog: false })
    }

    public handleClick() {
        this.setState({ hideDialog: true })
    }

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

        <DialogComponent width='250px' isModal={true} target='#container' visible = {this.state.hideDialog} close = {this.dialogClose}
          ref={dialog => this.dialogInstance = dialog!} overlayClick={ this.onOverlayClick } >
          This is a modal Dialog </DialogComponent>
      </div>);
    }
    }

ReactDOM.render(<Default />, document.getElementById('dialog'));
<!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="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>

Enable header

The Dialog header can be enabled by adding the header content as text or HTML content through the header property.

Source
Preview
index.tsx
index.html
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 render() {
  return (
  <div className="App">
        <DialogComponent width='250px' target='#container' header='Dialog' closeOnEscape = {false}>
        This is a dialog with header </DialogComponent>
    </div>);
}
}

ReactDOM.render(<Default />, document.getElementById('dialog'));
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>

The Dialog provides built-in support to render the buttons on the footer (for ex: ‘OK’ or ‘Cancel’ buttons). Each Dialog button allows the user to perform any action while clicking on it.

The primary button will be focused automatically on open the Dialog, and add the click event to handle the actions

When the Dialog initialize with more than one primary buttons, the first primary button gets focus on open the Dialog.

The below sample render with button and its click event.

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

export class Default extends React.Component<{}, {hideDialog: boolean;}> {
public dialogInstance: DialogComponent;

constructor(props: {}) {
    super(props);
    this.state = {
        hideDialog : true
    };
}

public buttons: any = [{
    buttonModel: {
        content: 'OK',
        cssClass: 'e-flat',
        isPrimary: true,
    },
    'click': () => {
        this.setState({ hideDialog: false })
    }
},
{
    buttonModel: {
        content: 'Cancel',
        cssClass: 'e-flat'
    },
    'click': () => {
        this.setState({ hideDialog: false })
    }
}];

public handleClick() {
    this.setState({ hideDialog: true })
}

public dialogClose = () => {
    this.setState({ hideDialog: false })
}

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

      <DialogComponent width='250px' target='#container' close = {this.dialogClose} header='Dialog' visible = {this.state.hideDialog}showCloseIcon={true}  buttons={this.buttons} ref={dialog => this.dialogInstance = dialog!}>
      This is a Dialog with button and primary button </DialogComponent>
  </div>);
}
}

ReactDOM.render(<Default />, document.getElementById('dialog'));
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>

Draggable

The Dialog supports to drag within its target container by grabbing the Dialog header, which allows the user to reposition the Dialog dynamically.

The Dialog can be draggable only when the Dialog header is enabled. From 16.2.x version, enabled draggable support for modal dialog also.

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

export class Default extends React.Component<{}, {hideDialog: boolean;}> {
public dialogInstance: DialogComponent;

constructor(props: {}) {
    super(props);
    this.state = {
        hideDialog : true
    };
}

public buttons: any = [{
    buttonModel: {
        content: 'OK',
        cssClass: 'e-flat',
        isPrimary: true,
    },
    'click': () => {
        this.setState({ hideDialog: false })
    }
},
{
    buttonModel: {
        content: 'Cancel',
        cssClass: 'e-flat'
    },
    'click': () => {
        this.setState({ hideDialog: false })
    }
}];

public handleClick() {
    this.setState({ hideDialog: true })
}

public dialogClose = () => {
    this.setState({ hideDialog: false })
}

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

      <DialogComponent width='250px' target='#container' visible = {this.state.hideDialog} close = {this.dialogClose} header='Dialog' allowDragging={true} showCloseIcon={true}  buttons={this.buttons} ref={dialog => this.dialogInstance = dialog!}>
      This is a Dialog with drag enabled </DialogComponent>
  </div>);
}
}

ReactDOM.render(<Default />, document.getElementById('dialog'));
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>

Positioning

The Dialog position can be set through the position property by providing X and Y coordinates. The Dialog can be positioned inside the target container based on the given X and Y values.

For example position:{ X:‘center’, Y:‘center’ } the possible values

  • for X is: left, center, right (or) any offset value
  • for Y is: top, center, bottom (or) any offset value

The below sample demonstrates the different Dialog positions.

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

export class Default extends React.Component<{}, { hideDialog: boolean; }> {

    public defaultDialogInstance: DialogComponent;
    public PositioningInstance: HTMLElement;

    public position: any;
    constructor(props: {}) {
        super(props);
        this.state = {
            hideDialog : true
        };
       this.position = { X: 'center', Y: 'center' };
    }

    public changePosition = (event:any): void => {
        this.defaultDialogInstance.position = { X: event.currentTarget.value.split(" ")[0], Y: event.currentTarget.value.split(" ")[1] };

        this.PositioningInstance.innerHTML = 'Position: {X: "' + event.currentTarget.value.split(" ")[0] + '", Y: "' + event.currentTarget.value.split(" ")[1] + '"}'
        const txt: string[] = event.target.parentElement.querySelector('.e-label').innerText.split(" ");
        this.PositioningInstance.innerHTML = 'Position: { X: "' + txt[0] + '", Y: "' + txt[1] + '" }';
    }

    public dialogClose = () => {
      this.setState({ hideDialog: false });
    }

    public dialogOpen = () => {
        this.setState({ hideDialog: true });
    }

    public footerTemplate = (): JSX.Element => {
        return (
            <span id="posvalue" ref={positionElement => this.PositioningInstance = positionElement!}/>
        )
    }
    public render() {
      return (
       <div className="App">
     <DialogComponent id='defaultDialog' header='Choose a Dialog Position' visible={this.state.hideDialog} showCloseIcon={false} position={this.position} footerTemplate={this.footerTemplate} width='452px' ref={defaultDialog => this.defaultDialogInstance = defaultDialog!}
            target='#container' open={this.dialogOpen} close={this.dialogClose} closeOnEscape={false}>
            <table id ='poschange'>
            <tbody>
                <tr>
                <td><RadioButtonComponent id='radio1'  label='Left Top' value='left top' name='xy' onClick = {this.changePosition.bind(this)} /></td>
                <td><RadioButtonComponent id='radio2'  label='Center Top' value='center top' name='xy' onClick={this.changePosition.bind(this)}/></td>
                <td><RadioButtonComponent id='radio3'  label='Right Top' value='right top' name='xy' onClick={this.changePosition.bind(this)}/></td>
              </tr>
              <tr>
                <td><RadioButtonComponent id='radio4'  label='Left Center' value='left center' name='xy' onClick={this.changePosition.bind(this)} /></td>
                <td><RadioButtonComponent id='radio5' checked = {true} label='Center Center' value='center center' name='xy' onClick={this.changePosition.bind(this)} /></td>
                <td><RadioButtonComponent id='radio6'  label='Right Center' value='right center' name='xy' onClick={this.changePosition.bind(this)} /></td>
              </tr>
              <tr>
                <td><RadioButtonComponent id='radio7'  label='Left Bottom' value='left bottom' name='xy' onClick={this.changePosition.bind(this)} /></td>
                <td><RadioButtonComponent id='radio8'  label='Center Bottom' value='center bottom' name='xy' onClick={this.changePosition.bind(this)} /></td>
                <td><RadioButtonComponent id='radio9'  label='Right Bottom' value='right bottom' name='xy' onClick={this.changePosition.bind(this)} /></td>
              </tr>
              </tbody>
        </table>
        </DialogComponent>
        </div>
    );
    }
}
ReactDOM.render(<Default />, document.getElementById('dialog'));
<!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="//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" />
    <link href="styles.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="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>

See Also