Getting Started

23 Feb 202424 minutes to read

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

To get start quickly with React Dialog component, you can check on this video:

Dependencies

The following list of dependencies are required to use the React 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

 <div class='tsx'>

  ```
   create-react-app quickstart --scripts-version=react-scripts-ts
   cd quickstart
  ```
 </div>
<div class='jsx'>    ```
create-react-app quickstart
 cd quickstart    ```

</div>

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 React Dialog component to the application. We have added Dialog component in src/App.tsx file using following code.

[Class-component]

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

class App extends React.Component<{}, {hideDialog: boolean;}> {
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" id='dialog-target'>
      <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}/>
  </div>);
}
}
export default App;

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hideDialog: false
        };
    }
    handleClick() {
        this.setState({ hideDialog: true });
    }
    dialogClose = () => {
        this.setState({ hideDialog: false });
    };
    render() {
        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 width='250px' content='This is a Dialog with content' target='.App' visible={this.state.hideDialog} close={this.dialogClose}/>
  </div>);
    }
}
export default App;

[Functional-component]

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

function App() {
    const [status, setStatus] = React.useState({ hideDialog: false });
    function handleClick() {
        setStatus({ hideDialog: true })
    }

    function dialogClose() {
        setStatus({ hideDialog: false })
    }

    return (
        <div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)} >Open</button>
            <DialogComponent width='250px' content='This is a Dialog with content' target='.App' visible = {status.hideDialog} close = {dialogClose}/>
        </div>
    );
}
export default App;

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    const [status, setStatus] = React.useState({ hideDialog: false });
    function handleClick() {
        setStatus({ hideDialog: true });
    }
    function dialogClose() {
        setStatus({ hideDialog: false });
    }
    return (<div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
            <DialogComponent width='250px' content='This is a Dialog with content' target='.App' visible={status.hideDialog} close={dialogClose}/>
        </div>);
}
export default App;

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.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    dialogInstance;
    constructor(props) {
        super(props);
        this.state = {
            hideDialog: false
        };
    }
    handleClick() {
        this.setState({ hideDialog: true });
    }
    dialogClose = () => {
        this.setState({ hideDialog: false });
    };
    render() {
        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 width='250px' content='This is a Dialog with content' target='#dialog-target' visible={this.state.hideDialog} close={this.dialogClose}/>
    </div>);
    }
}
export default App;

app.tsx

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

class App 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" id='dialog-target'>
      <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='#dialog-target' visible = {this.state.hideDialog} close = {this.dialogClose}/>
    </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let dialogInstance;
    const [status, setStatus] = React.useState({ hideDialog: false });
    function handleClick() {
        setStatus({ hideDialog: true });
    }
    function dialogClose() {
        setStatus({ hideDialog: false });
    }
    return (<div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
        <DialogComponent width='250px' content='This is a Dialog with content' target='#dialog-target' visible={status.hideDialog} close={dialogClose}/>
    </div>);
}
export default App;

app.tsx

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

function App() {
  let dialogInstance: DialogComponent;
  const [status, setStatus] = React.useState({ hideDialog: false });
  function handleClick() {
    setStatus({ hideDialog: true })
  }
  function dialogClose () {
    setStatus({ hideDialog: false })
  }
  return (
    <div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)} >Open</button>
        <DialogComponent width='250px' content='This is a Dialog with content' target='#dialog-target' visible = {status.hideDialog} close = {dialogClose}/>
    </div>
  );
}
export default App;

In the dialog control, max-height is calculated based on the dialog target element height. If the target property is not configured, the document.body is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element.
If the dialog is rendered based on the body, then the dialog will get the height based on its body element height. If the height of the dialog is larger than the body height, then the dialog’s height will not be set. For this scenario, we can set the CSS style for the html and body to get the dialog height.

html, body {
   height: 100%;
}

Modal Dialog

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.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    dialogInstance;
    constructor(props) {
        super(props);
        this.state = {
            hideDialog: true
        };
    }
    onOverlayClick = () => {
        this.setState({ hideDialog: false });
    };
    dialogClose = () => {
        this.setState({ hideDialog: false });
    };
    handleClick() {
        this.setState({ hideDialog: true });
    }
    render() {
        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 width='250px' isModal={true} target='#dialog-target' visible={this.state.hideDialog} close={this.dialogClose} overlayClick={this.onOverlayClick}>
          This is a modal 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<{}, {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" id='dialog-target'>
          <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='#dialog-target' visible = {this.state.hideDialog} close = {this.dialogClose}
           overlayClick={ this.onOverlayClick } >
          This is a modal 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;
    const [status, setStatus] = React.useState({ hideDialog: true });
    function onOverlayClick() {
        setStatus({ hideDialog: false });
    }
    function dialogClose() {
        setStatus({ hideDialog: false });
    }
    function handleClick() {
        setStatus({ hideDialog: true });
    }
    return (<div className="App" id='dialog-target'>
          <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>

        <DialogComponent width='250px' isModal={true} target='#dialog-target' visible={status.hideDialog} close={dialogClose} overlayClick={onOverlayClick}>
          This is a modal 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;
    const [status, setStatus] = React.useState({ hideDialog: true });

    function onOverlayClick() {
        setStatus({ hideDialog: false })
    }

    function dialogClose() {
        setStatus({ hideDialog: false })
    }

    function handleClick() {
        setStatus({ hideDialog: true })
    }

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

        <DialogComponent width='250px' isModal={true} target='#dialog-target' visible = {status.hideDialog} close = {dialogClose}
           overlayClick={ onOverlayClick } >
          This is a modal Dialog </DialogComponent>
      </div>
    );
}
export default App;

Enable header

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

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    render() {
        return (<div className="App" id='dialog-target'>
          <DialogComponent width='250px' target='#dialog-target' showCloseIcon={true} header='Dialog' closeOnEscape={false}>
          This is a dialog with header </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 render() {
    return (
    <div className="App" id='dialog-target'>
          <DialogComponent width='250px' target='#dialog-target'  showCloseIcon={true} header='Dialog' closeOnEscape = {false}>
          This is a dialog with header </DialogComponent>
      </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    return (<div className="App" id='dialog-target'>
            <DialogComponent width='250px' target='#dialog-target' showCloseIcon={true} header='Dialog' closeOnEscape={false}>
            This is a dialog with header </DialogComponent>
        </div>);
}
export default App;

app.tsx

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

function App() {
    return (
        <div className="App" id='dialog-target'>
            <DialogComponent width='250px' target='#dialog-target'  showCloseIcon={true} header='Dialog' closeOnEscape = {false}>
            This is a dialog with header </DialogComponent>
        </div>
    );
}
export default App;

Enable footer

The React 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.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                this.setState({ hideDialog: false });
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            'click': () => {
                this.setState({ hideDialog: false });
            }
        }];
    constructor(props) {
        super(props);
        this.state = {
            hideDialog: true
        };
    }
    handleClick() {
        this.setState({ hideDialog: true });
    }
    dialogClose = () => {
        this.setState({ hideDialog: false });
    };
    render() {
        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 width='250px' target='#dialog-target' close={this.dialogClose} header='Dialog' visible={this.state.hideDialog} showCloseIcon={true} buttons={this.buttons}>
        This is a Dialog with button and primary button </DialogComponent>
    </div>);
    }
}
export default App;

app.tsx

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

class App extends React.Component<{}, {hideDialog: boolean;}> {  
  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 })
    }
}];

  constructor(props: {}) {
      super(props);
      this.state = {
          hideDialog : true
      };
  }
  
  public handleClick() {
      this.setState({ hideDialog: true })
  }
  
  public dialogClose = () => {
      this.setState({ hideDialog: false })
  }
  
  public render() {
    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 width='250px' target='#dialog-target' close = {this.dialogClose} header='Dialog' visible = {this.state.hideDialog}showCloseIcon={true}  buttons={this.buttons}>
        This is a Dialog with button and primary button </DialogComponent>
    </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    const [status, setStatus] = React.useState({ hideDialog: true });
    let buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                setStatus({ hideDialog: false });
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            'click': () => {
                setStatus({ hideDialog: false });
            }
        }];
    function handleClick() {
        setStatus({ hideDialog: true });
    }
    function dialogClose() {
        setStatus({ hideDialog: false });
    }
    return (<div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
        <DialogComponent width='250px' target='#dialog-target' close={dialogClose} header='Dialog' visible={status.hideDialog} showCloseIcon={true} buttons={buttons}>
        This is a Dialog with button and primary button </DialogComponent>
    </div>);
}
export default App;

app.tsx

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

function App(){  
  const [status, setStatus] = React.useState({ hideDialog: true });
  let buttons: any = [{
    buttonModel: {
        content: 'OK',
        cssClass: 'e-flat',
        isPrimary: true,
    },
    'click': () => {
        setStatus({ hideDialog: false })
    }
    },
    {
        buttonModel: {
            content: 'Cancel',
            cssClass: 'e-flat'
        },
        'click': () => {
            setStatus({ hideDialog: false })
        }
    }];

  function handleClick() {
    setStatus({ hideDialog: true })
  }

  function dialogClose() {
    setStatus({ hideDialog: false })
  }

  return (
    <div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
        <DialogComponent width='250px' target='#dialog-target' close = {dialogClose} header='Dialog' visible = {status.hideDialog} showCloseIcon={true}  buttons={buttons}>
        This is a Dialog with button and primary button </DialogComponent>
    </div>
  );
}
export default App;

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.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                this.setState({ hideDialog: false });
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            'click': () => {
                this.setState({ hideDialog: false });
            }
        }];
    constructor(props) {
        super(props);
        this.state = {
            hideDialog: true
        };
    }
    handleClick() {
        this.setState({ hideDialog: true });
    }
    dialogClose = () => {
        this.setState({ hideDialog: false });
    };
    render() {
        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 width='250px' target='#dialog-target' visible={this.state.hideDialog} close={this.dialogClose} header='Dialog' allowDragging={true} showCloseIcon={true} buttons={this.buttons}>
      This is a Dialog with drag enabled </DialogComponent>
  </div>);
    }
}
export default App;

app.tsx

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

class App extends React.Component<{}, {hideDialog: boolean;}> {  
  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 })
      }
    }];

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

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

public render() {
  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 width='250px' target='#dialog-target' visible = {this.state.hideDialog} close = {this.dialogClose} header='Dialog' allowDragging={true} showCloseIcon={true}  buttons={this.buttons}>
      This is a Dialog with drag enabled </DialogComponent>
  </div>);
}
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    const [status, setStatus] = React.useState({ hideDialog: true });
    let buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                setStatus({ hideDialog: false });
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            'click': () => {
                setStatus({ hideDialog: false });
            }
        }];
    function handleClick() {
        setStatus({ hideDialog: true });
    }
    function dialogClose() {
        setStatus({ hideDialog: false });
    }
    return (<div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
            <DialogComponent width='250px' target='#dialog-target' visible={status.hideDialog} close={dialogClose} header='Dialog' allowDragging={true} showCloseIcon={true} buttons={buttons}>
            This is a Dialog with drag enabled </DialogComponent>
        </div>);
}
export default App;

app.tsx

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

function App() {  
    const [status, setStatus] = React.useState({ hideDialog: true });
    let buttons: any = [{
        buttonModel: {
            content: 'OK',
            cssClass: 'e-flat',
            isPrimary: true,
        },
        'click': () => {
            setStatus({ hideDialog: false })
        }
    },
    {
    buttonModel: {
        content: 'Cancel',
        cssClass: 'e-flat'
    },
    'click': () => {
        setStatus({ hideDialog: false })
    }
    }];

    function handleClick() {
        setStatus({ hideDialog: true })
    }

    function dialogClose()  {
        setStatus({ hideDialog: false })
    }

    return (
        <div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
            <DialogComponent width='250px' target='#dialog-target' visible = {status.hideDialog} close = {dialogClose} header='Dialog' allowDragging={true} showCloseIcon={true}  buttons={buttons}>
            This is a Dialog with drag enabled </DialogComponent>
        </div>
    );
}
export default App;

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.

[Class-component]

app.jsx

import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    defaultDialogInstance;
    PositioningInstance;
    position;
    constructor(props) {
        super(props);
        this.state = {
            hideDialog: true
        };
        this.position = { X: 'center', Y: 'center' };
    }
    changePosition = (event) => {
        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 = event.target.parentElement.querySelector('.e-label').innerText.split(" ");
        this.PositioningInstance.innerHTML = 'Position: { X: "' + txt[0] + '", Y: "' + txt[1] + '" }';
    };
    dialogClose = () => {
        this.setState({ hideDialog: false });
    };
    dialogOpen = () => {
        this.setState({ hideDialog: true });
    };
    footerTemplate = () => {
        return (<span id="posvalue"/>);
    };
    render() {
        return (<div className="App" id='dialog-target'>
    <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='#dialog-target' 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 = this.changePosition.bind(this)}/></td>
              <td><RadioButtonComponent id='radio2' label='Center Top' value='center top' name='xy' onClick={this.changePosition = this.changePosition.bind(this)}/></td>
              <td><RadioButtonComponent id='radio3' label='Right Top' value='right top' name='xy' onClick={this.changePosition = this.changePosition.bind(this)}/></td>
            </tr>
            <tr>
              <td><RadioButtonComponent id='radio4' label='Left Center' value='left center' name='xy' onClick={this.changePosition = this.changePosition.bind(this)}/></td>
              <td><RadioButtonComponent id='radio5' checked={true} label='Center Center' value='center center' name='xy' onClick={this.changePosition = this.changePosition.bind(this)}/></td>
              <td><RadioButtonComponent id='radio6' label='Right Center' value='right center' name='xy' onClick={this.changePosition = this.changePosition.bind(this)}/></td>
            </tr>
            <tr>
              <td><RadioButtonComponent id='radio7' label='Left Bottom' value='left bottom' name='xy' onClick={this.changePosition = this.changePosition.bind(this)}/></td>
              <td><RadioButtonComponent id='radio8' label='Center Bottom' value='center bottom' name='xy' onClick={this.changePosition = this.changePosition.bind(this)}/></td>
              <td><RadioButtonComponent id='radio9' label='Right Bottom' value='right bottom' name='xy' onClick={this.changePosition = this.changePosition.bind(this)}/></td>
            </tr>
            </tbody>
      </table>
      </DialogComponent>
      </div>);
    }
}
export default App;

app.tsx

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

class App 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" />
      )
  }
  public render() {
    return (
      <div className="App" id='dialog-target'>
    <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='#dialog-target' 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 = this.changePosition.bind(this)} /></td>
              <td><RadioButtonComponent id='radio2'  label='Center Top' value='center top' name='xy' onClick={this.changePosition = this.changePosition.bind(this)}/></td>
              <td><RadioButtonComponent id='radio3'  label='Right Top' value='right top' name='xy' onClick={this.changePosition = this.changePosition.bind(this)}/></td>
            </tr>
            <tr>
              <td><RadioButtonComponent id='radio4'  label='Left Center' value='left center' name='xy' onClick={this.changePosition = this.changePosition.bind(this)} /></td>
              <td><RadioButtonComponent id='radio5' checked = {true} label='Center Center' value='center center' name='xy' onClick={this.changePosition = this.changePosition.bind(this)} /></td>
              <td><RadioButtonComponent id='radio6'  label='Right Center' value='right center' name='xy' onClick={this.changePosition = this.changePosition.bind(this)} /></td>
            </tr>
            <tr>
              <td><RadioButtonComponent id='radio7'  label='Left Bottom' value='left bottom' name='xy' onClick={this.changePosition = this.changePosition.bind(this)} /></td>
              <td><RadioButtonComponent id='radio8'  label='Center Bottom' value='center bottom' name='xy' onClick={this.changePosition = this.changePosition.bind(this)} /></td>
              <td><RadioButtonComponent id='radio9'  label='Right Bottom' value='right bottom' name='xy' onClick={this.changePosition = this.changePosition.bind(this)} /></td>
            </tr>
            </tbody>
      </table>
      </DialogComponent>
      </div>
  );
  }
}
export default App;

[Functional-component]

app.jsx

import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let defaultDialogInstance;
    let PositioningInstance;
    const [status, setStatus] = React.useState({ hideDialog: true });
    let position;
    position = { X: 'center', Y: 'center' };
    function changePosition(event) {
        defaultDialogInstance.position = { X: event.currentTarget.value.split(" ")[0], Y: event.currentTarget.value.split(" ")[1] };
        PositioningInstance.innerHTML = 'Position: {X: "' + event.currentTarget.value.split(" ")[0] + '", Y: "' + event.currentTarget.value.split(" ")[1] + '"}';
        const txt = event.target.parentElement.querySelector('.e-label').innerText.split(" ");
        PositioningInstance.innerHTML = 'Position: { X: "' + txt[0] + '", Y: "' + txt[1] + '" }';
    }
    function dialogClose() {
        setStatus({ hideDialog: false });
    }
    function dialogOpen() {
        setStatus({ hideDialog: true });
    }
    function footerTemplate() {
        return (<span id="posvalue"/>);
    }
    return (<div className="App" id='dialog-target'>
        <DialogComponent id='defaultDialog' header='Choose a Dialog Position' visible={status.hideDialog} showCloseIcon={false} position={position} footerTemplate={footerTemplate} width='452px' ref={defaultDialog => defaultDialogInstance = defaultDialog} target='#dialog-target' open={dialogOpen} close={dialogClose} closeOnEscape={false}>
            <table id='poschange'>
            <tbody>
                <tr>
                <td><RadioButtonComponent id='radio1' label='Left Top' value='left top' name='xy' onClick={changePosition.bind(this)}/></td>
                <td><RadioButtonComponent id='radio2' label='Center Top' value='center top' name='xy' onClick={changePosition.bind(this)}/></td>
                <td><RadioButtonComponent id='radio3' label='Right Top' value='right top' name='xy' onClick={changePosition.bind(this)}/></td>
                </tr>
                <tr>
                <td><RadioButtonComponent id='radio4' label='Left Center' value='left center' name='xy' onClick={changePosition.bind(this)}/></td>
                <td><RadioButtonComponent id='radio5' checked={true} label='Center Center' value='center center' name='xy' onClick={changePosition.bind(this)}/></td>
                <td><RadioButtonComponent id='radio6' label='Right Center' value='right center' name='xy' onClick={changePosition.bind(this)}/></td>
                </tr>
                <tr>
                <td><RadioButtonComponent id='radio7' label='Left Bottom' value='left bottom' name='xy' onClick={changePosition.bind(this)}/></td>
                <td><RadioButtonComponent id='radio8' label='Center Bottom' value='center bottom' name='xy' onClick={changePosition.bind(this)}/></td>
                <td><RadioButtonComponent id='radio9' label='Right Bottom' value='right bottom' name='xy' onClick={changePosition.bind(this)}/></td>
                </tr>
                </tbody>
        </table>
    </DialogComponent>
    </div>);
}
export default App;

app.tsx

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

function App() {  
  let defaultDialogInstance: DialogComponent;
  let PositioningInstance: HTMLElement;
  const [status, setStatus] = React.useState({ hideDialog: true });
  let position: PositionDataModel;
  position = { X: 'center', Y: 'center' };

  function changePosition(event: any): void {
    defaultDialogInstance.position = { X: event.currentTarget.value.split(" ")[0], Y: event.currentTarget.value.split(" ")[1] };
    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(" ");
    PositioningInstance.innerHTML = 'Position: { X: "' + txt[0] + '", Y: "' + txt[1] + '" }';
  }

  function dialogClose (){
    setStatus({ hideDialog: false });
  }

  function dialogOpen() {
    setStatus({ hideDialog: true });
  }

  function footerTemplate (): JSX.Element {
    return (
        <span id="posvalue" />
    )
  }
  return (
    <div className="App" id='dialog-target'>
        <DialogComponent id='defaultDialog' header='Choose a Dialog Position' visible={status.hideDialog} showCloseIcon={false} position={position} footerTemplate={footerTemplate} width='452px' ref={defaultDialog => defaultDialogInstance = defaultDialog!}
            target='#dialog-target' open={dialogOpen} close={dialogClose} closeOnEscape={false}>
            <table id ='poschange'>
            <tbody>
                <tr>
                <td><RadioButtonComponent id='radio1'  label='Left Top' value='left top' name='xy' onClick = {changePosition.bind(this)} /></td>
                <td><RadioButtonComponent id='radio2'  label='Center Top' value='center top' name='xy' onClick={changePosition.bind(this)}/></td>
                <td><RadioButtonComponent id='radio3'  label='Right Top' value='right top' name='xy' onClick={changePosition.bind(this)}/></td>
                </tr>
                <tr>
                <td><RadioButtonComponent id='radio4'  label='Left Center' value='left center' name='xy' onClick={changePosition.bind(this)} /></td>
                <td><RadioButtonComponent id='radio5' checked = {true} label='Center Center' value='center center' name='xy' onClick={changePosition.bind(this)} /></td>
                <td><RadioButtonComponent id='radio6'  label='Right Center' value='right center' name='xy' onClick={changePosition.bind(this)} /></td>
                </tr>
                <tr>
                <td><RadioButtonComponent id='radio7'  label='Left Bottom' value='left bottom' name='xy' onClick={changePosition.bind(this)} /></td>
                <td><RadioButtonComponent id='radio8'  label='Center Bottom' value='center bottom' name='xy' onClick={changePosition.bind(this)} /></td>
                <td><RadioButtonComponent id='radio9'  label='Right Bottom' value='right bottom' name='xy' onClick={changePosition.bind(this)} /></td>
                </tr>
                </tbody>
        </table>
    </DialogComponent>
    </div>
  );
}
export default App;

See Also

• Load dialog content using AJAX
• How to position the dialog on center of the page on scrolling
• Prevent closing of modal dialog
• Close dialog while click on outside of dialog
• How to make a reusable alert and confirm dialog