Close the toast with click/tap

17 Feb 20222 minutes to read

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.

<div class="control-section" style="width:400px;margin:0 auto;">
    <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-button id="show_toast" content="Show Toast" cssClass="e-btn"></ejs-button>
<script type="text/javascript">
        () => {
            var toastObj = document.getElementById('element').ej2_instances[0];
   = document.body;
        }, 200);
    document.getElementById("show_toast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];;
    function onClick(e) {
        e.clickToClose = true;
public class HomeController : Controller

    public ActionResult Index()
        return View();