Icons in EJ2 JavaScript Message control
10 May 202317 minutes to read
This section explains the message with no icons, how to show or hide the close icon and add the custom severity icon to the message.
No Icon
By default, severity icons can be displayed according to the severity types to make it more understandable to the user by visual information rather than text. To hide the severity icons, set the showIcon property to false.
The following example demonstrates the different severity messages without the severity icons.
var msgDefault = new ej.notifications.Message({
content: "Editing is restricted",
showIcon: false
});
msgDefault.appendTo('#msg_default');
var msgInfo = new ej.notifications.Message({
content: "Please read the comments carefully",
severity: "Info",
showIcon: false
});
msgInfo.appendTo('#msg_info');
var msgSuccess = new ej.notifications.Message({
content: "Your message has been sent successfully",
severity: "Success",
showIcon: false
});
msgSuccess.appendTo('#msg_success');
var msgWarning = new ej.notifications.Message({
content: "There was a problem with your network connection",
severity: "Warning",
showIcon: false
});
msgWarning.appendTo('#msg_warning');
var msgError = new ej.notifications.Message({
content: "A problem occurred while submitting your data",
severity: "Error",
showIcon: false
});
msgError.appendTo('#msg_error');<html><head>
<title>Essential JS 2 Message control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Message control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/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">
<div class="msg-default-section">
<div class="content-section">
<div id="msg_default"></div>
<div id="msg_info"></div>
<div id="msg_success"></div>
<div id="msg_warning"></div>
<div id="msg_error"></div>
</div>
</div>
</div>
<style>
/* Sample level styles */
.msg-default-section .content-section {
margin: 0 auto;
max-width: 450px;
padding-top: 10px;
}
.msg-default-section .e-message {
margin: 10px 0;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Custom Icon
By default, the severity icons can be displayed according to the severity type to make it more understandable to the user by visual information rather than text. If the user wants to customize these icons, it can be achieved through the cssClass property.
The following example demonstrates how the default message is rendered with a custom severity icon.
var msgIcon = new ej.notifications.Message({
cssClass: "custom"
});
msgIcon.appendTo('#msg_icon');<html><head>
<title>Essential JS 2 Message control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Message control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/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">
<div class="msg-custom-section">
<div class="content-section">
<div id="msg_icon">Essential JS 2 is a modern JavaScript UI Controls library built from the ground up to be lightweight, responsive, modular, and touch friendly. It is written in the TypeScript and has no external dependencies. It also includes complete support for Angular, React, Vue, ASP.NET MVC, and ASP.NET Core frameworks.</div>
</div>
</div>
</div>
<style>
/* Sample level styles */
.msg-custom-section .content-section {
margin: 0 auto;
max-width: 400px;
padding-top: 10px;
}
.msg-custom-section .e-message {
margin: 10px 0;
}
@font-face {
font-family: 'Message_icons';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
.custom.e-message .e-msg-icon::before {
font-family: 'Message_icons';
content: '\e894';
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Close Icon
The message can be rendered with or without the close icon. The close icon is used to hide the message, either by manually clicking the close icon or through keyboard interaction.
By default, the close icon is not rendered in the message. To show the close icon, set the showCloseIcon property to true.
In the following example, the messages are rendered with the close icon.
var showButton = new ej.buttons.Button({ content: 'Show Default Message', cssClass: "e-outline e-primary msg-hidden" });
showButton.appendTo('#btn1');
showButton.element.onclick = function () {
show(msgDefaultIcon, showButton);
};
var infoButton = new ej.buttons.Button({ content: 'Show Info Message', cssClass: "e-outline e-primary e-info msg-hidden" });
infoButton.appendTo('#btn2');
infoButton.element.onclick = function () {
show(msgInfoIcon, infoButton);
};
var successButton = new ej.buttons.Button({ content: 'Show Success Message', cssClass: "e-outline e-primary e-success msg-hidden" });
successButton.appendTo('#btn3');
successButton.element.onclick = function () {
show(msgSuccessIcon, successButton);
};
var warningButton = new ej.buttons.Button({ content: 'Show Warning Message', cssClass: "e-outline e-primary e-warning msg-hidden" });
warningButton.appendTo('#btn4');
warningButton.element.onclick = function () {
show(msgWarningIcon, warningButton);
};
var errorButton = new ej.buttons.Button({ content: 'Show Error Message', cssClass: "e-outline e-primary e-danger msg-hidden" });
errorButton.appendTo('#btn5');
errorButton.element.onclick = function () {
show(msgErrorIcon, errorButton);
};
var msgDefaultIcon = new ej.notifications.Message({
content: "Editing is restricted",
showCloseIcon: true,
closed: function () {
showButton.element.classList.remove('msg-hidden');
}
});
msgDefaultIcon.appendTo('#msg_default_icon');
var msgInfoIcon = new ej.notifications.Message({
content: "Please read the comments carefully",
severity: "Info",
showCloseIcon: true,
closed: function () {
infoButton.element.classList.remove('msg-hidden');
}
});
msgInfoIcon.appendTo('#msg_info_icon');
var msgSuccessIcon = new ej.notifications.Message({
content: "Your message has been sent successfully",
severity: "Success",
showCloseIcon: true,
closed: function () {
successButton.element.classList.remove('msg-hidden');
}
});
msgSuccessIcon.appendTo('#msg_success_icon');
var msgWarningIcon = new ej.notifications.Message({
content: "There was a problem with your network connection",
severity: "Warning",
showCloseIcon: true,
closed: function () {
warningButton.element.classList.remove('msg-hidden');
}
});
msgWarningIcon.appendTo('#msg_warning_icon');
var msgErrorIcon = new ej.notifications.Message({
content: "A problem occurred while submitting your data",
severity: "Error",
showCloseIcon: true,
closed: function () {
errorButton.element.classList.remove('msg-hidden');
}
});
msgErrorIcon.appendTo('#msg_error_icon');
function show(message, btn) {
message.visible = true;
btn.element.classList.add('msg-hidden');
}<html><head>
<title>Essential JS 2 Message control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Message control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/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">
<div class="msg-icon-section">
<div class="content-section">
<button id="btn1"></button>
<div id="msg_default_icon"></div>
<button id="btn2"></button>
<div id="msg_info_icon"></div>
<button id="btn3"></button>
<div id="msg_success_icon"></div>
<button id="btn4"></button>
<div id="msg_warning_icon"></div>
<button id="btn5"></button>
<div id="msg_error_icon"></div>
</div>
</div>
</div>
<style>
/* Sample level styles */
.msg-icon-section .content-section {
margin: 0 auto;
max-width: 450px;
padding-top: 10px;
}
.msg-icon-section .e-message {
margin: 10px 0;
}
.msg-icon-section .e-btn {
display: block;
margin: 10px 0;
}
.msg-icon-section .e-btn.msg-hidden {
display: none;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>