Template in EJ2 JavaScript Dialog

4 Sep 20266 minutes to read

In Dialog, template support is provided to the header, footer, and content sections. So any text or HTML content can be appended in these sections.

The Dialog header content can be provided through the header property, and it will allow both text and any HTML content as a string. Also in the header, a close button is provided as built-in support, and this can be enabled through the showCloseIcon property.

The Dialog footer can be enabled by adding the built-in buttons or providing any HTML string through the footerTemplate.

The buttons and footerTemplate properties can’t be used at the same time. If both are set, the footerTemplate is ignored and the buttons are rendered.

Content

The Dialog content can be provided through the content property, and it accepts both text and HTML strings as content.

The below example demonstrates the usage of header, footer, and content templates in the Dialog control.

/**
* Dialog template sample
*/

var icontemp = '<button id="sendButton" class="e-control e-btn e-primary" data-ripple="true">' + 'Send</button>';
var headerimg = '<img class="img2" style="display: inline-block;" src="https://ej2.syncfusion.com/products/typescript/dialog/template/images/1.png" alt="header image">';
var sendbutton = new ej.buttons.Button();
var proxy = this;

// Initialize Dialog component
var dialog = new ej.popups.Dialog({
    // Enables the header with template content
    header: headerimg + '<div class="dlg-template" title="Nancy" class="e-icon-settings"> Nancy </div>',
    // Enables the footer with template content
    footerTemplate: ' <input id="inVal" class="e-input" type="text" placeholder="Enter your message here!"/>' + icontemp,
    // Dialog content
    content: document.getElementById("dlgContent"),
    // Enables the close icon button in header
    showCloseIcon: true,
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    //Dialog width
    width: '400px',
    height: '250px',
    beforeOpen: onBeforeopen
});
// Render initialized Dialog
dialog.appendTo('#dialog');
sendbutton.appendTo('#sendButton');

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function () {
    // Call the show method to open the Dialog
    dialog.show();
};

document.getElementById('sendButton').onkeydown = function (e) {
    if (e.keyCode === 13) {
        updateTextValue();
    }
};

document.getElementById('inVal').onkeydown = function (e) {
    if (e.keyCode === 13) {
        updateTextValue();
    }
};

document.getElementById('sendButton').onclick = function () {
    updateTextValue();
};

function onBeforeopen() {
    document.getElementById('dlgContent').style.visibility = 'visible';
}

function updateTextValue() {
    var enteredVal = document.getElementById('inVal');
    var dialogTextElement = document.getElementsByClassName('dialogText')[0];
    var dialogTextWrap = document.getElementsByClassName('dialogContent')[0];
    if (enteredVal.value !== '') {
        dialogTextElement.innerHTML = enteredVal.value;
        enteredVal.value = '';
    }
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog with template 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/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true">Open Dialog</button>
        <div id="dialog" class="custom-template"></div>
        <div id="dlgContent" style="visibility: hidden" class="dialogContent">
            <span class="dialogText">
            Greetings Nancy! When will you share me the source files of the project?
            </span>
        </div>
    </div>

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

See Also