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.

razor
HomeController.cs
<div class="control-section">
    @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 id='templateToast' style="display: none;color:red"> System affected by virus !!! </div>
    <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];
        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