Close the toast with click/tap

17 Feb 20221 minute 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.

CSHTML

<div class="control-section" style="width:400px;margin:0 auto;">
    @Html.EJS().Toast("element").Title("Matt sent you a friend request").Position(p => p.X("Right").Y("Bottom")).Content("You have a new friend request yet to accept").TimeOut(0).Click("onClick").Render()
    <div class="row">
        @Html.EJS().Button("show_toast").Content("Show Toast").CssClass("e-btn").Render()
    </div>
</div>
<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>

Controller.cs

public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }
}