Search results

Template

In Dialog the template support is provided to the header and footer sections. So any text or HTML content can be appending 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 header, 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 built-in buttons or providing any HTML string through the footerTemplate.

The buttons and footerTemplate properties can’t be used at the same time.

The below example demonstrates the usage of header and footer template in the Dialog

Source
Preview
index.js
index.html
styles.css
ej.base.enableRipple(true);

// Initialize Dialog component
var dialog = new ej.popups.Dialog({
    // Enables the header with template content
    header: '<div title="Installation Complete" class="e-icon-settings e-icons" style="padding: 3px;">   Installation Complete</div>',
    // Enables the footer with template content
    footerTemplate: '<span style="float: left;font-size: 14px;padding-left: 15px;color: rgba(0, 0, 0, 0.54);">Click the close button to Exit</span>',
    // Dialog content
    content: 'The application has been successfully installed.',
    // Enables the close icon button in header
    showCloseIcon: true,
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    //Dialog width
    width: '330px'
});
// Render initialized Dialog
dialog.appendTo('#dialog');

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function() {
    // 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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/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>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#dialog .e-icon-settings::before { /* csslint allow: adjoining-classes */
    padding: 3px;
    font-size: 15px;
}

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#sendButton { 
    top: 5px;
    position: relative;
    right: 7px;
}

.custom-template.e-dialog .e-dlg-header-content { /* csslint allow: adjoining-classes */
    border-bottom: none;
    padding: 11px;
}

.e-dialog .e-footer-content { /* csslint allow: adjoining-classes */
    right: 7px;
}

.e-dialog .e-dlg-header-content { /* csslint allow: adjoining-classes */
    background-color: #007DD1;
    padding: 10px;
}

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn { /* csslint allow: adjoining-classes */
    top: 5px;
    left: -11px;
}

.e-dialog .e-dlg-header { /* csslint allow: adjoining-classes */
    position: relative;
}

.e-dialog .e-dlg-content { /* csslint allow: adjoining-classes */
    padding: 0;
}

 #sendbtn {
    margin-right: -17px;
    margin-top: -2%;
}

.e-open-icon::before { /* csslint allow: adjoining-classes */
    content: '\e782';
}

.e-dialog .e-dlg-header > .img2 { /* csslint allow: adjoining-classes */
    height: 36px;
    width: 36px;
    border-radius: 50%;
    vertical-align: middle;
}
.e-dialog .e-dlg-header .dlg-template { /* csslint allow: adjoining-classes */
    display: inline-block;
    padding: 0 10px;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    color: #fff;
}
.e-dialog .e-dlg-header-content .e-btn .e-btn-icon { /* csslint allow: adjoining-classes */
    margin-top: -3px;
}
.custom-template .e-input { /* csslint allow: adjoining-classes */
    width: 75%;
    float: left;
    height: 18px;
}

.e-icon-settings.e-icons { /* csslint allow: adjoining-classes */
    float: left;
    position: relative;
    left: 16%;
    top: -33px;
}

.e-icon-settings.e-icons { /* csslint allow: adjoining-classes */
    top: -37px;
}

.e-icon-settings.e-icons { /* csslint allow: adjoining-classes */
    top: -35px;
}
.dialogContent .dialogText { /* csslint allow: adjoining-classes */
    font-size: 13px;
    padding: 5%;
    word-wrap: break-word;
    border-radius: 6px;
    text-align: justify;
    font-style: initial;
    display: block;
}

.dialogContent .dialogText { /* csslint allow: adjoining-classes */
    background-color: #f5f5f5;
}

.custom-template.e-dialog .e-footer-content { /* csslint allow: adjoining-classes */
    border-top: 0.5px solid #949494;
    padding-left: 31px;
}

.dialogContent {
    display: block;
    font-size: 15px;
    word-wrap: break-word;
    text-align: center;
    font-style: italic;
    border-radius: 6px;
    padding: 3%;
    position: relative;
    top: 25px;
}

.e-dialog .dialogContent { /* csslint allow: adjoining-classes */
    top: 20px;
}

.control-wrapper .e-control.e-dialog { /* csslint allow: adjoining-classes */
    width: 30%;
}

.e-dialog .e-dlg-header-content .e-icon-dlg-close { /* csslint allow: adjoining-classes */
  color: #fff;
}

.e-dialog .e-btn.e-dlg-closeicon-btn:hover span{ /* csslint allow: adjoining-classes */
    color: #8ECBFF;
  }
/* csslint ignore:start */
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover {
    background-color: rgba(255,255,255, 0.10);
}
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus {
      background-color: rgba(255,255,255, 0.10);
  }
/* csslint ignore:end */  
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:active .e-icon-dlg-close { /* csslint allow: adjoining-classes */
    color: #fff;
}
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus .e-icon-dlg-close { /* csslint allow: adjoining-classes */
    color: #fff;
}
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover .e-icon-dlg-close { /* csslint allow: adjoining-classes */
      color: #fff;
  }

See Also