Search results

Action Buttons

You can include action buttons to the toast control by adding the buttons property. The collection of Essential JS 2 button models can be bound to the model property inside the buttons property. You can also include the click event callback function for each button.

tagHelper
HomeController.cs
<ejs-toast id="element" title="Anjolie Stokes" extendedTimeout="20000" 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 click="btnClick" 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];
        toastObj.show();
    });
    function btnClick(e) {
        var toastEle = ej.base.closest(e.target, '.e-toast');
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.hide(toastEle);
    }
</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; }
         }

Output be like the below.

Toast control with action buttons support

See Also