Time out

21 Dec 20225 minutes to read

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.

NOTE

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

<div style="width:400px;margin:0 auto;">
    <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>
    <ejs-toast id="element" width="300" height="150">
        <e-toast-position X="Right" Y="Bottom"></e-toast-position>
        <e-toast-buttonmodelprops>
            <e-toast-buttonmodelprop model="ViewBag.ToastButtons1">
            </e-toast-buttonmodelprop>
            <e-toast-buttonmodelprop model="ViewBag.ToastButtons2">
            </e-toast-buttonmodelprop>
        </e-toast-buttonmodelprops>
        <e-content-template>
            <p><img alt='Laura' class='toast-img' src='https://ej2.syncfusion.com/demos/src/toast/resource/laura.png' /><span class="name">Anjolie Stokes</span></p>
            <div class="content">
                <p>Thanks for update!</p>
            </div>
        </e-content-template>
    </ejs-toast>
    <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();
        }, 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>
<style>
    .toast-img {
        width: 40px;
        height: 40px;
    }

    .name {
        padding-left: 20px;
        font-size: 17px;
        font-weight: 500;
    }

    .content {
        padding-left: 60px;
        font-size: 12px;
    }
</style>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.ToastButtons1 = new DefaultButtonModel() { content = "Ignore" };
        ViewBag.ToastButtons2 = new DefaultButtonModel() { content = "reply" };
        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.

<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" showCloseButton="true" timeOut="0">
        <e-toast-position X="Right"></e-toast-position>
    </ejs-toast>
    <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();
        }, 1000);
    document.getElementById("show_toast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.show();
    });
</script>
public class HomeController : Controller
{

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

See Also