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.

tagHelper
HomeController.cs
<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" title="Anjolie Stokes" content="<p><img src='./laura.png'></p>" width="230" height="250">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
    <e-toast-buttons>
        <e-toast-buttonmodelprops model="@(new { content="Ignore"})">
        </e-toast-buttonmodelprops>
        <e-toast-buttonmodelprops model="@(new { content="reply"})">
        </e-toast-buttonmodelprops>
    </e-toast-buttons>
    </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();
        }, 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.

tagHelper
HomeController.cs
<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>

<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