Config in EJ2 JavaScript Toast
4 Sep 202615 minutes to read
This section explains the steps required to customize the appearance of the Toast using built-in APIs.
Title and content template
The Toast can be created with a notification message. The message contains the title and content of the toasts. The title and content are adaptable in any resolution.
The Title or Content property can be given as HTML element/element ID to a string that can be displayed as a toast.
ej.base.enableRipple(true);
//Initialize Toast component
var toast = new ej.notifications.Toast({
title: 'Matt sent you a friend request',
content: 'You have a new friend request yet to accept',
position: { X: "Center" }
});
//Render initialized Toast component
toast.appendTo('#element');
toast.show();
document.getElementById('show_toast').onclick = function () {
toast.show();
}<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Toast</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Toolbar Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/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">
<div class="row"> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
<div id="element"></div>
<br><br>
<div id="result"></div>
<div id="templateToast" style="display: none;color:red"> System affected by virus !!! </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>Specifying custom target
By default, the Toast is rendered in the document body. The target position for Toast rendering can be changed using the target property. Based on the target, the position will be updated.
Close button
By default, the showCloseButton is not enabled. It can be enabled by setting the value to true. Before the Toast expires, this button can be used to close or destroy toasts manually.
Progress bar
By default, the showProgressBar is not enabled. If enabled, it visually indicates when the Toast will expire. Based on the timeOut property, the progress bar will appear.
Progress bar direction
By default, the progressDirection is set to “Rtl” and it will appear in the right-to-left direction. The progressDirection can be changed to “Ltr” to make it appear in the left-to-right direction.
Newest on top
By default, the newly created toasts are appended next to existing toasts. The sequence can be changed, inserting the new toast before the existing toasts by enabling the newestOnTop property.
The following sample demonstrates the combination of the target, showCloseButton, showProgressBar, and newestOnTop properties in the Toast.
ej.base.enableRipple(true);
//Initialize Toast component
var toast = new ej.notifications.Toast({
title: 'File Downloading',
content: '<div class="progress"><span style="width: 80%"></span></div>',
showCloseButton: true,
target: '#toast_target',
position: { X: "Center" },
newestOnTop: true,
showProgressBar: true
});
//Render initialized Toast component
toast.appendTo('#element');
toast.show();
document.getElementById('show_toast').onclick = function () {
toast.show();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Toast</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Toolbar Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<style>
#toast_target {
height: 200px;
}
</style>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class='row'> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
<div id='element'></div>
<br/><br/>
<div id='toast_target'></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>Width and height
The dimensions of the Toast can be set using the width and height properties. This will individually set all toasts. Toasts with different custom dimensions can be created.
By default, the Toast is rendered with a 300px width and auto height.
In mobile devices, the default width of the Toast takes ‘100%’ width of the page.
When the Toast width is set as ‘100%’, the Toast occupies the full width and will be displayed at the top or bottom based on the positionYproperty.
Both the width and height properties allow setting pixels/numbers/percentage. The number value is considered as pixels.
ej.base.enableRipple(true);
//Initialize Toast component
var toast = new ej.notifications.Toast({
title: 'Matt sent you a friend request',
content: 'You have a new friend request yet to accept',
position: { X: "Center", Y: "Bottom" },
width: 400,
height: 150,
});
var radioButton = new ej.buttons.RadioButton({ label: 'Top', name: 'toast', value: 'Target', change: checkboxChange });
radioButton.appendTo('#topAlign');
var radioButton2 = new ej.buttons.RadioButton({ label: 'Bottom', name: 'toast', value: 'Global', checked: true, change: checkboxChange1 });
radioButton2.appendTo('#bottomAlign');
var checkBoxObj = new ej.buttons.CheckBox({ label: '100% Width', change: onChange });
checkBoxObj.appendTo('#fullWidth');
toast.appendTo('#element');
let timeDelay = 500;
function onChange(e) {
if (e.checked) {
toast.hide();
toast.width = "100%";
toast.title="";
toast.content="<div class='e-custom'>Take a look at our next generation <b>Javascript</b> <a href='https://ej2.syncfusion.com/home/index.html' target='_blank'>LEARN MORE</a></div>";
toastShow(timeDelay);
} else {
toast.hide();
toast.width= 300;
toast.title= 'Matt sent you a friend request',
toast.content='You have a new friend request yet to accept',
toastShow(timeDelay);
}
}
function toastShow(timeOutDelay) {
setTimeout(
function () {
toast.show();
}, timeOutDelay);
}
function checkboxChange(e) {
if (e.event.target.checked) {
toast.position.Y = "Top";
toast.hide();
toastShow(timeDelay);
}
}
function checkboxChange1(e) {
if (e.event.target.checked) {
toast.position.Y = "Bottom";
toast.hide();
toastShow(timeDelay);
}
}
document.getElementById('show_toast').onclick = function () {
toast.show();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Toast</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Toolbar Controls" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='element'></div>
<div class='row'> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
<div class='row' style="padding-top: 20px" id= "toast_pos_target">
<table>
<tr>
<td>
<div style='padding:25px 0 0 0;'>
<input id="topAlign" type="radio">
</div>
</td>
<td>
<div style='padding:25px 0 0 0;'>
<input id="bottomAlign" type="radio">
</div>
</td>
</tr>
<tr>
<td>
<div style='padding:25px 0 0 0;'>
<input id="fullWidth" type="checkbox">
</div>
</td>
</tr>
</table>
</div>
<br/><br/>
<div id='result'></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>