Getting started in EJ2 TypeScript Dialog control

12 Apr 202524 minutes to read

This section explains how to create a simple Dialog component and configure its available functionalities in TypeScript, using Essential® JS 2 quickstart seed repository.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. It requires node v14.15.0 or higher. For more information about webpack and its features, refer to the webpack documentation.

Dependencies

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

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

Set up development environment

Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from GitHub.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart

After cloning the application in the ej2-quickstart folder, run the following command line to navigate to the ej2-quickstart folder.

cd ej2-quickstart

Add Syncfusion® JavaScript packages

Syncfusion® JavaScript (Essential® JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

The quickstart application is preconfigured with the dependent @syncfusion/ej2 package in the ~/package.json file. Use the following command to install the dependent npm packages from the command prompt.

npm install

Import the Syncfusion® CSS styles

To render Dialog component, need to import Popups and its dependent components styles as given below in in the ~/src/styles/styles.css file, as shown below:

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-icons/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';

Adding Dialog to the project

Add the div element with id attribute #dialog inside the body tag in your index.html.

[src/index.html]

<!DOCTYPE html> <html lang="en"> <head> <title>Essential JS 2 Dialog Component</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta name="description" content="Essential JS 2" /> <meta name="author" content="Syncfusion" /> <link rel="shortcut icon" href="resources/favicon.ico" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div> <!--element which is going to render the Dialog --> <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true">Open Dialog</button> <div id="dialog"></div> </div> </body> </html>

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.

Now import the Dialog component into your app.ts and append it to #dialog
[src/app/app.ts]

import { Dialog } from '@syncfusion/ej2-popups'; // Initialization of Dialog component let dialog: Dialog = new Dialog({ // Dialog content content: 'This is a Dialog with content', // The Dialog shows within the target element target: document.getElementById("container"), // Dialog width width: '250px' }); // Render initialized Dialog dialog.appendTo('#dialog');

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.

Run the application

The Essential® JS 2 quickstart application project is configured to compile and run the application in browser.
Use the following command to run the application.

npm start
import { Dialog } from '@syncfusion/ej2-popups'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); // Initialization of Dialog let dialog: Dialog = new Dialog({ // Dialog content content: 'This is a Dialog with content', // The Dialog shows within the target element target: document.getElementById("container"), // Dialog width width: '250px' }); // Render initialized Dialog dialog.appendTo('#dialog'); // Sample level code to handle the button click action document.getElementById('targetButton').onclick = (): void => { // Call the show method to open the Dialog dialog.show(); }
<!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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-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> <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script> </head> <body> <div id='loader'>LOADING....</div> <div id='container'> <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;" >Open Dialog</button> <div id='dialog'></div> </div> </body> </html>

In the dialog control, 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%; }

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.

import { Dialog } from '@syncfusion/ej2-popups'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); // Initialize Dialog component let dialog = new Dialog({ // Enables modal dialog isModal:true, // overlayClick event handler overlayClick: onOverlayClick, // Dialog content content: 'This is a modal dialog', // The Dialog shows within the target element target: document.getElementById("container"), // Dialog width width: '250px' }); // Render initialized Dialog dialog.appendTo('#dialog'); // Sample level code to handle the button click action document.getElementById('targetButton').onclick = (): void => { // Call the show method to open the Dialog dialog.show(); } // Sample level code to hide the Dialog when click the Dialog overlay function onOverlayClick() { dialog.hide(); }
<!DOCTYPE html> <html lang="en"> <head> <title>Essential JS 2 Modal 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://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-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> <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script> </head> <body> <div id='loader'>LOADING....</div> <div id='container'> <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;">Open Modal Dialog</button> <div id='dialog'></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.

import { Dialog } from '@syncfusion/ej2-popups'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); // Initialization of Dialog component let dialog = new Dialog({ // Enables the header header: 'Dialog', // Enables the close icon button in header showCloseIcon: true, // Dialog content content: 'This is a dialog with header', // The Dialog shows within the target element target: document.getElementById("container"), // Dialog width width: '250px', }); // Sample level code to handle the button click action document.getElementById('targetButton').onclick = (): void => { // Call the show method to open the Dialog dialog.show(); } // Render initialized Dialog dialog.appendTo('#dialog');
<!DOCTYPE html> <html lang="en"> <head> <title>Essential JS 2 Dialog with header</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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-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> <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script> </head> <body> <div id='loader'>LOADING....</div> <div id='container'> <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;" >Open Dialog</button> <div id='dialog'></div> </div> </body> </html>

Configure action buttons

The Dialog provides built-in support to render the action buttons on the footer (for ex: ‘OK’ or ‘Cancel’ buttons) by using buttons property. 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 buttons and its action.

import { Dialog } from '@syncfusion/ej2-popups'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); // Initialize Dialog component let dialog = new Dialog({ // Enables the footer buttons buttons: [ { // Click the footer buttons to hide the Dialog 'click': () => { dialog.hide();}, // Accessing button component properties by buttonModel property buttonModel: { //Enables the primary button isPrimary: true, content: 'OK' } }, { 'click': () => { dialog.hide(); }, buttonModel: { content: 'Cancel', cssClass: 'e-flat' } } ], // Enables the header header: 'Dialog', // Dialog content content: 'This is a Dialog with button and primary button', // The Dialog shows within the target element target: document.getElementById("container"), // Dialog width width: '250px' }); // Render initialized Dialog dialog.appendTo('#dialog'); // Sample level code to handle the button click action document.getElementById('targetButton').onclick = (): void => { // Call the show method to open the Dialog dialog.show(); }
<!DOCTYPE html> <html lang="en"> <head> <title>Essential JS 2 Dialog with footer</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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-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> <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script> </head> <body> <div id='loader'>LOADING....</div> <div id='container'> <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;" >Open Dialog</button> <div id='dialog'></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.

import { Dialog } from '@syncfusion/ej2-popups'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); let dialog = new Dialog({ // Enables the draggable option allowDragging: true, // Enables the header header: 'Dialog', // Dialog content content: 'This is a Dialog with drag enabled', // Enables the draggable option allowDragging: true, // Enables the footer buttons, buttons: [ { // Click the footer buttons to hide the Dialog 'click': () => { dialog.hide(); }, // Accessing button component properties by buttonModel property buttonModel:{ //Enables the primary button isPrimary: true, content:'OK' } }, { 'click': () => { dialog.hide(); }, buttonModel:{ content:'Cancel', cssClass:'e-flat' } } ], // The Dialog shows within the target element target: document.getElementById("container"), // Dialog width width: '250px', }); // Render initialized Dialog dialog.appendTo('#dialog'); // Sample level code to handle the button click action document.getElementById('targetButton').onclick = (): void => { // Call the show method to open the Dialog dialog.show(); }
<!DOCTYPE html> <html lang="en"> <head> <title>Essential JS 2 Dialog with draggable support</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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-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> <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script> </head> <body> <div id='loader'>LOADING....</div> <div id='container' style="padding: 20px;"> <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;" >Open Dialog</button> <div id='dialog'></div> </div> </body> </html>

Positioning

The Dialog can be positioned using the position property by providing the X and Y co-ordinates. It can be positioned inside the target of the container or <body> of the element based on the given X and Y values.

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

The below example demonstrates the different Dialog positions.

import { Dialog } from '@syncfusion/ej2-popups'; import { RadioButton } from '@syncfusion/ej2-buttons'; let dialog: Dialog = new Dialog({ // Set Dialog position position: { X: 'center', Y: 'center' }, // Disable the Esc key option to hide the Dialog closeOnEscape: false, // Enables the close icon button in header showCloseIcon: true, // Enables the header header: 'Choose a Dialog Position', // The dialog shows within the target element target: document.getElementById('target'), // Dialog width width: '440px', open: dialogOpen, close: dialogClose, //Dialog footerTemplate footerTemplate: '<span id="posvalue" style="float:left;margin-left:8px;padding:10px;">Position: { X: "Center", Y: "Center" }</span>' }); // Render initialized Dialog dialog.appendTo('#dialog'); let onChangeHandler: any = (args: any) => { dialog.position.X = args.value.split(' ')[0]; dialog.position.Y = args.value.split(' ')[1]; let txt: string[] = args.event.target.parentElement.querySelector('.e-label').innerText.split(' '); document.getElementById('posvalue').innerHTML = 'Position: { X: "' + txt[0] + '", Y: "' + txt[1] + '" }'; }; let radioButton: RadioButton = new RadioButton({label: 'Left Top', value: 'left top', change: onChangeHandler }); radioButton.appendTo('#radio1'); radioButton = new RadioButton({label: 'Center Top', value: 'center top', change: onChangeHandler}); radioButton.appendTo('#radio2'); radioButton = new RadioButton({label: 'Right Top', value: 'right top', change: onChangeHandler}); radioButton.appendTo('#radio3'); radioButton = new RadioButton({label: 'Left Center', value: 'left center', change: onChangeHandler}); radioButton.appendTo('#radio4'); radioButton = new RadioButton({label: 'Center Center', value: 'center center', change: onChangeHandler, checked: true}); radioButton.appendTo('#radio5'); radioButton = new RadioButton({label: 'Right Center', value: 'right center', change: onChangeHandler}); radioButton.appendTo('#radio6'); radioButton = new RadioButton({label: 'Left Bottom', value: 'left bottom', change: onChangeHandler}); radioButton.appendTo('#radio7'); radioButton = new RadioButton({label: 'Center Bottom', value: 'center bottom', change: onChangeHandler}); radioButton.appendTo('#radio8'); radioButton = new RadioButton({label: 'Right Bottom', value: 'right bottom', change: onChangeHandler}); radioButton.appendTo('#radio9'); document.getElementById('dialogBtn').onclick = (): void => { dialog.show(); }; function dialogOpen(): void { document.getElementById('dialogBtn').style.display = 'none'; } function dialogClose(): void { document.getElementById('dialogBtn').style.display = 'block'; }
<!DOCTYPE html> <html lang="en"> <head> <title>Essential JS 2 Dialog Positioning</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="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-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> <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script> </head> <body> <div id='loader'>LOADING....</div> <div id='container'> <button class="e-control e-btn" id="dialogBtn" role="button" e-ripple="true" style="position: absolute;" >Open Dialog</button> <div id='dialog'> <table style="width:405px;" id ="poschange" > <tr> <td ><input id="radio1" type="radio" name="xy" ></td> <td><input id="radio2" type="radio" name="xy" ></td> <td><input id="radio3" type="radio" name="xy" ></td> </tr> <tr> <td><input id="radio4" type="radio" name="xy" ></td> <td><input id="radio5" type="radio" name="xy" ></td> <td><input id="radio6" type="radio" name="xy" ></td> </tr> <tr> <td><input id="radio7" type="radio" name="xy" ></td> <td><input id="radio8" type="radio" name="xy" ></td> <td><input id="radio9" type="radio" name="xy" ></td> </tr> </table> </div> </div> </body> </html>

See Also