Search results

Time out

The toast can be expired based on the timeOut property. The toast can live till the time out reaches without user interaction, a time out value is considered as a millisecond.

  • The timeOut delay can be visually represented using Progress Bar.

  • The extendedTimeOut property determines how long the toast should be displayed after a user hovers over it.

You can terminate the process by using the showCloseButton property for destroying the toast at any time.

razor
HomeController.cs
<div class="control-section">
    <div class="e-float-input"><input class="e-input" id="toast_input_index" required="" value="0"><span class="e-float-line"></span><label class="e-float-text">Enter timeOut</label></div>
    @Html.EJS().Toast("element").Position(p => p.X("Right").Y("Bottom")).Title("Anjolie Stokes").Content("<p><img src = './laura.png'></p>").Width("230").Height("250").Buttons(ViewBag.ToastButtons).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();
            }, 1000);
        document.getElementById("show_toast").addEventListener('click', function () {
            var toastObj = document.getElementById('element').ej2_instances[0];
            var value = parseInt(document.getElementById('toast_input_index').value)
            toastObj.show({ timeOut: value });
        });
    </script>
using Syncfusion.EJ2.Notifications;

public ActionResult Toast()
{
    List<ToastButtonModelProps> buttons = new List<ToastButtonModelProps>() { };
    buttons.Add(new ToastButtonModelProps() {  Click= "btnClick", Model = new DefaultButtonModel() { content = "Ignore" } });
    buttons.Add(new ToastButtonModelProps() { Model = new DefaultButtonModel() { content = "reply" } });
    ViewBag.ToastButtons = buttons;
    return View();
}
public class DefaultButtonModel
        {
            public string content { get; set; }
         }

Static toast

You can prevent auto hiding in a toast as visible like static by setting zero (0) value in the timeOut Property.

razor
HomeController.cs
<div class="control-section">
    @Html.EJS().Toast("element").Title("Matt sent you a friend request").Content("You have a new friend request yet to accept").TimeOut(0).ShowCloseButton(true).Position(p => p.X("Right")).Render()
    @Html.EJS().Button("show_toast").Content("Show Toast").CssClass("e-btn").Render()
    </div>
    <script type="text/javascript">
        setTimeout(
            () => {
                var toastObj = document.getElementById('element').ej2_instances[0];
                toastObj.target = document.body;
                toastObj.show();
            }, 1000);
        document.getElementById("show_toast").addEventListener('click', function () {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.show();
        });
    </script>
public ActionResult Toast()
{
    return View();
}

See Also