Es5 getting started in EJ2 JavaScript Predefined dialogs control

2 Jun 202324 minutes to read

The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.

Dependencies

The following list of dependencies are required to use Predefined dialogs in your application.

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

Control Initialization

The Essential JS 2 JavaScript controls can be initialized by using either of the following ways.

Using local script and style references in a HTML page.
Using CDN link for script and style reference.

Using local script and style references in a HTML page

Step 1: Create an app folder quickstart for Essential JS 2 JavaScript controls.

Step 2: You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.

Syntax:

Script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/material.css

Example:

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-popups/dist/global/ej2-popups.min.js

Styles: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-popups/styles/material.css

Step 3: Create a folder ~/quickstart/resources and copy/paste the global scripts and styles from the above installed location to quickstart/resources/package corresponding package location.

Step 4: Create a HTML page (index.html) in ~/quickstart.index.html location and add the Essentials JS 2 script and style references.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 - Predefined Dialogs</title>
            <!-- Essential JS 2 material theme -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />

            <!-- Essential JS 2 Dialog's global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Step 5: Now, add the Predefined dialogs element and initiate the Syncfusion Javascript Predefined Dialogs in the index.html by using following code

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 - Predefined Dialogs</title>
            <!-- Essential JS 2 material theme -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />

            <!-- Essential JS 2 Dialog's global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>

            <style>
                #container {
                    min-height: 300px;
                }
            </style>
       </head>
       <body>
            <script>
                //Initialize Predefined dialog alert
                ej.popups.DialogUtility.alert({
                    // Dialog Title
                    title: 'Low Battery',
                    // Dialog content
                    content: '10% of battery remaining',
                    // Dialog width
                    width: '250px'
                });
            </script>
       </body>
  </html>

Step 6: Now, run the index.html in web browser, it will render the Syncfusion Javascript Predefined Dialogs.

Using CDN link for script and style reference

Step 1: Create an app folder quickstart for the getting started.

Step 2: The Essential JS 2 control’s global scripts and styles are already hosted in the below CDN link formats.

Syntax:

Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css

Example:

Script: http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js

Styles: http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css

Step 3: Create a HTML page (index.html) in ~/quickstart/index.html location and add the CDN link references. Now, add the Predefined dialogs element and initiate the Syncfusion Javascript Predefined Dialogs in the index.html by using following code.

index.js
index.html
ej.base.enableRipple(true);

var alertBtn = new ej.buttons.Button({ cssClass: 'e-danger' });
alertBtn.appendTo('#alertBtn');
document.getElementById('alertBtn').onclick = function () {
    // Initialize and render alert dialog
    ej.popups.DialogUtility.alert({
        // Dialog Title
        title: 'Low Battery',
        // Dialog Content
        content: '10% of battery remaining',
        // Dialog width
        width: '250px'
    });
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI 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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button id="alertBtn" type="button">Alert</button>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Step 4: Now, run the index.html in web browser, it will render the Syncfusion Javascript Predefined Dialogs.

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.
cssClass	Specifies the CSS class name that can be appended to the dialog.
zIndex	Specifies the order of the dialog, that is displayed in front or behind of another component.
open	Event which is triggered after the dialog is opened.
Close	Event which is triggered after the dialog is closed.

Alert dialog

An alert dialog box used to display an errors, warnings, and information alerts that needs user awareness. The alert dialog is displayed along with the OK button. When user clicks on ‘OK’ button, alert dialog will get closed. Use the following code to render a simple alert dialog in an application.

index.js
index.html
ej.base.enableRipple(true);

var alertBtn = new ej.buttons.Button({ cssClass: 'e-danger' });
alertBtn.appendTo('#alertBtn');
document.getElementById('alertBtn').onclick = function () {
    document.getElementById("statusText").style.display="none";
    // Initialize and render alert dialog
    var alertDialogObj = ej.popups.DialogUtility.alert({
        title: 'Low Battery',
        width: '250px',
        content: '10% of battery remaining',
        okButton: { click: alertBtnClick.bind(this) },
        position: { X: 'center', Y: 'center' }
    });
    function alertBtnClick() {
        alertDialogObj.hide();
        document.getElementById("statusText").innerHTML = "The user closed the Alert dialog.";
        document.getElementById("statusText").style.display = "block";
    }
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI 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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button id="alertBtn" type="button">Alert</button>
        <span id="statusText"></span>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Confirm dialog

A confirm dialog box used to displays a specified message along with the ‘OK’ and ‘Cancel’ button. It is used to get approval from the user, and it appears before any critical action. After get approval from the user the dialog will disappear automatically. Use the following code to render a simple confirm dialog in an application.

index.js
index.html
ej.base.enableRipple(true);

var confirmBtn = new ej.buttons.Button({cssClass: 'e-success'});
confirmBtn.appendTo('#confirmBtn');
document.getElementById('confirmBtn').onclick = function () {
    document.getElementById("statusText").style.display="none";
    var comfirmDialogObj  = ej.popups.DialogUtility.confirm({
        title: 'Delete File',
        content: "Are you sure you want to permanently delete these file?",
        width: '300px',
        okButton: { text: 'OK', click: confirmOkAction.bind(this) },
        cancelButton: { text: 'Cancel', click: confirmCancelAction.bind(this) },
    });
    function confirmOkAction() {
        comfirmDialogObj.hide();
        document.getElementById("statusText").innerHTML = "The user confirmed the dialog box";
        document.getElementById("statusText").style.display = "block";
    }
    function confirmCancelAction() {
        comfirmDialogObj.hide();
        document.getElementById("statusText").innerHTML = "The user canceled the dialog box";
        document.getElementById("statusText").style.display = "block";
    }
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI 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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button id="confirmBtn" type="button">Confirm</button>
        <span id="statusText"></span>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Prompt dialog

A prompt dialog is used to get the input from the user. When the user clicks the ‘OK’ button the input value from the dialog is returned. If the user clicks the ‘Cancel’ button the null value is returned. After getting the input from the user the dialog will disappear automatically.

index.js
index.html
ej.base.enableRipple(true);

var promptBtn = new ej.buttons.Button({isPrimary: true});
promptBtn.appendTo('#promptBtn');
document.getElementById('promptBtn').onclick = function () {
    document.getElementById("statusText").style.display = "none";
    var dialogObj = ej.popups.DialogUtility.confirm({
        title: 'Join Chat Group',
        width:'300px',
        content: '<p>Enter your name: </p><input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />',
        okButton: { click: promptOkAction.bind(this) },
        cancelButton: { click: promptCancelAction.bind(this) },
        position: { X: 'center', Y: 'center' }
    });
    function promptOkAction() {
        var value;
        value = document.getElementById("inputEle").value;
        if (value == "") {
            dialogObj.hide();
            document.getElementById("statusText").innerHTML = "	The user's input is returned as \" \" ";
            document.getElementById("statusText").style.display = "block";
        }
        else {
            dialogObj.hide();
            document.getElementById("statusText").innerHTML = "The user's input is returned as" + " " + value;
            document.getElementById("statusText").style.display = "block";
        }
    }
    function promptCancelAction() {
        dialogObj.hide();
        document.getElementById("statusText").innerHTML = "The user canceled the prompt dialog";
        document.getElementById("statusText").style.display = "block";
    }
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI 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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button id="promptBtn" type="button">Prompt</button>
        <span id="statusText"></span>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>