How To

Prevent duplicate toast display

You can prevent identical same toast displaying in a screen by the event function and terminate the toast displaying process by setting the cancel event property in the beforeOpen event.

The following sample demonstrates preventing duplicate title toast element displaying with custom code blocks.

tagHelper
HomeController.cs
<ejs-toast id="element" title="Sample Toast Title" content="Sample Toast content" beforeOpen="onBeforeOpen">
    <e-toast-position X="Center"></e-toast-position>
 </ejs-toast>
<ejs-button id="showToast" content="Show Toast" cssClass="e-btn"></ejs-button>
<script type="text/javascript">
    var toasts = [
        { title: 'Warning !', content: 'There was a problem with your network connection.' },
        { title: 'Success !', content: 'Your message has been sent successfully.' },
        { title: 'Error !', content: 'A problem has been occurred while submitting your data.' },
    ];
    var prevDuplicates = false;
    var toastFlag = 0;
    setTimeout(
        () => {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.target = document.body;
            toastObj.show(toasts[toastFlag]);
            ++toastFlag;
        }, 1000);
    function onBeforeOpen(e) {
        e.cancel = preventDuplicate(e);
    }
    function preventDuplicate(e) {
        var toastEle = e.element;
        var toasts = e.toastObj.element.children;
        for (var i = 0; i < toasts.length; i++) {
            if ((toasts[i]).querySelector('.e-toast-title').isEqualNode(toastEle.querySelector('.e-toast-title'))) {
                return true;
            }
        }
        return false;
    }
    document.getElementById("showToast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.show(toasts[toastFlag]);
        ++toastFlag;
        if (toastFlag === (toasts.length)) {
            toastFlag = 0;
        }
    });
    </script>
public ActionResult Toast()
{
    return View();
}

Restrict the maximum toast to show

You can restrict the maximum toast count by using the event callback function and terminate the toast displaying process by setting the cancel event property in the beforeOpen event.

The following sample demonstrates restricting toast displaying up to 3. You can restrict by your own count with custom code blocks.

tagHelper
HomeController.cs
<ejs-toast id="element" title="Sample Toast Title" content="Sample Toast content" beforeOpen="onBeforeOpen">
    <e-toast-position X="Center"></e-toast-position>
</ejs-toast>
<ejs-button id="showToast" content="Show Toast" cssClass="e-btn"></ejs-button>
<script type="text/javascript">
    var toasts = [
        { title: 'Warning !', content: 'There was a problem with your network connection.' },
        { title: 'Success !', content: 'Your message has been sent successfully.' },
        { title: 'Error !', content: 'A problem has been occurred while submitting your data.' },
        { title: 'Information !', content: 'Please read the comments carefully.' }
    ];
    var maxCount = 3;
    var toastFlag = 0;
    setTimeout(
        () => {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.target = document.body;
            toastObj.show(toasts[toastFlag]);
            ++toastFlag;
        }, 1000);
    function onBeforeOpen(e) {
        var toastObj = document.getElementById('element').ej2_instances[0];
        if (maxCount === toastObj.element.childElementCount) {
            e.cancel = true;
        } else {
            e.cancel = false;
        }
    }
    document.getElementById("showToast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.show(toasts[toastFlag]);
        ++toastFlag;
        if (toastFlag === (toasts.length)) {
            toastFlag = 0;
        }
    });
</script>
public ActionResult Toast()
{
    return View();
}

Customize progress bar theme and sizing

By default, the progress bar appears based on the theme stylings and dimensions. You can customize the progress bar stylings using custom CSS or event functions.

The following sample demonstrates customizing the progress bar stylings using the beforeOpen event.

tagHelper
HomeController.cs
<ejs-toast id="element" title="Matt sent you a friend request" content="You have a new friend request yet to accept" beforeOpen="onBeforeOpen" showProgressBar="true">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
<div class="row">
    <ejs-button id="show_toast" content="Show Toast" cssClass="e-btn"></ejs-button>
</div>
<div class="row" style="padding-top: 20px">
    <div class="e-float-input">
        <input class="e-input" id="progressHeight" name="Digits" value="4" required>
        <span class="e-float-line"></span>
        <label class="e-float-text" for="Digits">Progress Bar Height</label>
    </div>
</div>
<div class="row" style="padding-top: 20px">
    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
        <label> Progress Bar Color </label>
    </div>
    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
        <ejs-dropdownlist id="Progress" dataSource="@ViewBag.data" placeholder="Select a animate type" index="0" popupHeight="150px" change="valueChange">
            <e-dropdownlist-fields text="Value" value="Id"></e-dropdownlist-fields>
        </ejs-dropdownlist>    
    </div>
    <script type="text/javascript">
        setTimeout(
            () => {
                var toastObj = document.getElementById('element').ej2_instances[0];
                toastObj.target = document.body;
                toastObj.show();
            }, 200);
        function onBeforeOpen(e) {
            var progress = e.element.querySelector('.e-toast-progress');
            progress.style.height = document.getElementById('progressHeight').value + 'px';
            var listObjprogressColor = document.getElementById('Progress').ej2_instances[0];
            progress.style.backgroundColor = listObjprogressColor.value;
        }
        function valueChange(e) {
            var toastObj = document.getElementById('element').ej2_instances[0];
            var listObjprogressColor = document.getElementById('Progress').ej2_instances[0];
            var progressEles = toastObj.element.querySelectorAll('.e-toast-progress');
            progressEles.forEach((ele) => {
                ele.style.backgroundColor = listObjprogressColor.value;
            })
        }
        document.getElementById("show_toast").addEventListener('click', function () {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.show();
        });
    </script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
public ActionResult Toast()
{
     ViewBag.data = new Pos().Positions();
     return View();
}
  public class Pos
        {
            public string Value { get; set; }
            public string Id { get; set; }
            public List<Pos> Positions()
            {
                List<Pos> position = new List<Pos>();
                position.Add(new Pos { Id= "red", Value = "Red" });
                position.Add(new Pos { Id= "cyan", Value = "Cyan" });
                position.Add(new Pos { Id= "blue", Value = "Blue" });
                position.Add(new Pos { Id= "yellow", Value = "Yellow" });
                position.Add(new Pos { Id= "pink", Value = "Pink" });
                return position;
            }
        }

Play an audio before open the toast

The following sample demonstrates how to play an audio in background while opening the toast by including audio play codes into the beforeOpen event function.

To stop the audio after displaying the toast, use the open event in toast. For further customization, check the Toast Events APIs.

tagHelper
HomeController.cs
<ejs-toast id="element" title="Matt sent you a friend request" content="You have a new friend request yet to accept" beforeOpen="onBeforeOpen">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
<div class="row">
    <ejs-button id="show_toast" content="Show Toast" cssClass="e-btn"></ejs-button>
</div>
    <script type="text/javascript">
        setTimeout(
            () => {
                var toastObj = document.getElementById('element').ej2_instances[0];
                toastObj.target = document.body;
                toastObj.show();
            }, 200);
        function onBeforeOpen(e) {
            let audio = new Audio('https://drive.google.com/uc?export=download&id=1M95VOpto1cQ4FQHzNBaLf0WFQglrtWi7');
            audio.play();
        }
        document.getElementById("show_toast").addEventListener('click', function () {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.show();
        });
    </script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
public ActionResult Toast()
{
    return View();
}

Show different types of toast

The Essential JS 2 toast has the following predefined styles that can be defined using the cssClass property for achieving different types of toast:

Class Description
e-toast-success Represents a positive toast
e-toast-info Represents an informative toast
e-toast-warning Represents a toast with caution
e-toast-danger Represents a negative toast
tagHelper
HomeController.cs
<ejs-toast id="element">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
<div class="row">
    <ejs-button id="showToast" content="Show Types" cssClass="e-btn"></ejs-button>
</div>
    <script type="text/javascript">
        var toasts = [
            { title: 'Warning !', content: 'There was a problem with your network connection.', cssClass: 'e-toast-warning' },
            { title: 'Success !', content: 'Your message has been sent successfully.', cssClass: 'e-toast-success' },
            { title: 'Error !', content: 'A problem has been occurred while submitting your data.', cssClass: 'e-toast-danger' },
            { title: 'Information !', content: 'Please read the comments carefully.', cssClass: 'e-toast-info' }];
        var toastFlag = 0;
        setTimeout(
            () => {
                var toastObj = document.getElementById('element').ej2_instances[0];
                toastObj.target = document.body;
                toastObj.show(toasts[toastFlag]);
                ++toastFlag;
            }, 200);
        document.getElementById("showToast").addEventListener('click', function () {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.show(toasts[toastFlag]);
            ++toastFlag;
            if (toastFlag === (toasts.length)) {
                toastFlag = 0;
            }
        });
    </script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
public ActionResult Toast()
{
    return View();
}

Show multiple toasts in various positions

By default, the positions of the new toasts are only updated after the visible toasts have been destroyed. If You need to display multiple toasts with different positions, initiate another toasts.

The following sample demonstrates adding multiple toasts in different positions.

tagHelper
HomeController.cs
<ejs-toast id="element" title="Warning !" content="There was a problem with your network connection." click="onClick">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
 <ejs-toast id="element1" title="Success !" content="Your message has been sent successfully." click="onClick">
    <e-toast-position X="Left" Y="Bottom"></e-toast-position>
</ejs-toast>  
<div class="row">
    <ejs-button id="show_toast" content="Show Right Position Toast" cssClass="e-btn"></ejs-button>
    <ejs-button id="show_toast1" content="Show Left Position Toast" cssClass="e-btn"></ejs-button>
</div>
    <script type="text/javascript">
        setTimeout(
            () => {
                var toastObj = document.getElementById('element').ej2_instances[0];
                toastObj.target = document.body;
                toastObj.show();
                var toastObj = document.getElementById('element1').ej2_instances[0];
                toastObj.target = document.body;
                toastObj.show();
            }, 200);
        document.getElementById("show_toast").addEventListener('click', function () {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.show();
        });
        document.getElementById("show_toast1").addEventListener('click', function () {
            var toastObj = document.getElementById('element1').ej2_instances[0];
            toastObj.show();
        });
        function onClick(e) {
            e.clickToClose = true;
        }
    </script>
public ActionResult Badge()
{
    return View();
}

Close the toast with click/tap

By default, the toasts are expired based on the timeOut value. You can customize the toast hiding process with click/tap action by setting the event args in the clicked callback function with static Toast.

tagHelper
HomeController.cs
<ejs-toast id="element" title="Matt sent you a friend request" content="You have a new friend request yet to accept" timeOut="0" click="onClick">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
 
    <ejs-button id="show_toast" content="Show Toast" cssClass="e-btn"></ejs-button>

    <script type="text/javascript">
        setTimeout(
            () => {
                var toastObj = document.getElementById('element').ej2_instances[0];
                toastObj.target = document.body;
                toastObj.show();
            }, 200);
        document.getElementById("show_toast").addEventListener('click', function () {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.show();
        });
        function onClick(e) {
            e.clickToClose = true;
        }
    </script>
public ActionResult Toast()
{
    return View();
}

Add dynamic template

Toast supports to change templates dynamically with displaying in multiple toasts. You can change the toast properties while calling in the show method.

tagHelper
HomeController.cs
<ejs-toast id="element" click="onClick">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
 <div id='templateToast' style="display: none;color:red"> System affected by virus !!! </div>
    <ejs-button id="show_toast" content="Show Toast" cssClass="e-btn"></ejs-button>

    <script type="text/javascript">
        var toastFlag = 0;
        var toasts = [{ template: '2 Mail has received' }, { template: 'User Guest Logged in' }, { template: 'Logging in as Guest' }, { template: 'Ticket has reserved ' }, { template: '#templateToast' }];

        setTimeout(
            () => {
                var toastObj = document.getElementById('element').ej2_instances[0];
                toastObj.target = document.body;
                toastObj.show(toasts[toastFlag]);
                ++toastFlag;
            }, 1000);
        document.getElementById("show_toast").addEventListener('click', function () {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.show(toasts[toastFlag]);
            ++toastFlag;
            if (toastFlag === (toasts.length)) {
                toastFlag = 0;
            }
        });
        function onClick(e) {
            e.clickToClose = true;
        }
    </script>
public ActionResult Toast()
{
    return View();
}