Search results

Render a dialog using utility functions

The dialog component provides built-in utility functions to render the alert and confirm dialogs with the minimal code. The following options are used as an argument on calling the utility functions:

Options Description
title Specifies the title of dialog like the header property.
content Specifies the value that can be displayed in dialog’s content area like the content property.
isModal Specifies the Boolean value whether the dialog can be displayed as modal or non-modal. For more details, refer to the isModal property.
position Specifies the value where the alert or confirm dialog is positioned within the document. For more details, refer to the position property { X: ‘center’, Y: ‘center’}
okButton Configures the OK button that contains button properties with the click events. okButton:{ icon:'prefix icon to the button', cssClass:'custom class to the button', click: 'action for OK button click', text: 'Yes' // <-- Default value is 'OK' }
cancelButton Configures the Cancel button that contains button properties with the click events. cancelButton:{ icon:'prefix icon to the button', cssClass:'custom class to the button', click: 'action for ‘Cancel’ button click', text: 'No' // <-- Default value is 'Cancel'}
isDraggable Specifies the value whether the alert or confirm dialog can be dragged by the user.
showCloseIcon When set to true, the close icon is shown in the dialog component.
closeOnEscape When set to true, you can close the dialog by pressing ESC key.
animationSettings Specifies the animation settings of the dialog component.

Alert dialog

An alert dialog box is used to display warning like messages to the users. Use the following code to render a simple alert dialog in an application.

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

export default class App extends React.Component<{}, {}> {
    private buttonClick(): void {
        DialogUtility.alert('This is an Alert Dialog!');
    }
public render() {
    return (
        <button className="e-control e-btn" onClick={this.buttonClick.bind(this)} id="targetButton" role="button">Open Alert Dialog</button>);
    }
}
ReactDOM.render(<App />, document.getElementById("dialog"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dialog Utility</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>
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
	min-height: 350px;	
}

Render an alert dialog with options

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

export default class App extends React.Component<{}, {}> {
    private buttonClick(): void {
        DialogUtility.alert({
            title: 'Alert Dialog',
            content: "This is an Alert Dialog!",
            okButton: {  text: 'OK', click: this.okClick.bind(this) },
            showCloseIcon: true,
            closeOnEscape: true,
            animationSettings: { effect: 'Zoom' }
        });
    }
    private okClick(): void {
        alert('you clicked OK button');
    }
public render() {
        return (
        <button className="e-control e-btn" onClick={this.buttonClick.bind(this)} id="targetButton" role="button">Open Alert Dialog</button>);
    }
}
ReactDOM.render(<App />, document.getElementById("dialog"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dialog Utility</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>
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
	min-height: 350px;	
}

Confirm dialog

A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.

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

export default class App extends React.Component<{}, {}> {
    private buttonClick(): void {
        DialogUtility.confirm('This is a Confirmation Dialog!');
    }
public render() {
        return (
        <button className="e-control e-btn" onClick={this.buttonClick.bind(this)} id="targetButton" role="button">Open Confirm Dialog</button>);
    }
}
ReactDOM.render(<App />, document.getElementById("dialog"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dialog Utility</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>
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
	min-height: 350px;	
}

Render a confirmation dialog with options

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

export default class App extends React.Component<{}, {}> {
    private buttonClick(): void {
        DialogUtility.confirm({
            title: ' Confirmation Dialog',
            content: "This is a Confirmation Dialog!",
            okButton: {  text: 'OK', click: this.okClick.bind(this) },
            cancelButton: {  text: 'Cancel', click: this.cancelClick.bind(this) },
            showCloseIcon: true,
            closeOnEscape: true,
            animationSettings: { effect: 'Zoom' }
        });
    }
    private okClick(): void {
        alert('you clicked OK button');
    }

    private cancelClick(): void {
        alert('you clicked Cancel button');
    }
public render() {
    return (
    <button className="e-control e-btn" onClick={this.buttonClick.bind(this)} id="targetButton" role="button">Open Confirm Dialog</button>);
}

}
ReactDOM.render(<App />, document.getElementById("dialog"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dialog Utility</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>
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
	min-height: 350px;	
}