Acces Toast Model

[Nabil]

Hi, I am launching several toasts by using :

this.MySfToast.ShowAsync(new ToastModel {
                Title = title,
                Content = content,
                Key = key;
});

I would like to use a ToastButton :

<ToastButtons>
     <ToastButton Content="open" OnClick="OnToastClicked"></ToastButton>
</ToastButtons>

My problem is with the  OnToastClicked : it doesn't allow me to access the ToastModel so I only get the information that a toast button has been clicked but nothing about which toast button has been clicked.

Is there a way to access the model from the click event ? I need to know on which toast the user clicked to perform custom action (based for example on the key).

Thanks.

[Yohapuja Selvakumaran]

Hi Nabil,

Thank you for reaching out to us. We apologize for the delay in our response.

We have validated the reported issue and created a sample for your reference to demonstrate how to access the toast model inside the button click event. Please refer to the code snippet below:

Code Snippet:

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Notifications

<div class="control-section toast-default-section">

    <SfToast @ref="ToastObj" Title="Anjolie Stokes" Width="230" Height="250" Content="@ToastContent" Timeout="1000">

        <ToastPosition X="Right" Y="Bottom"></ToastPosition>

        <ToastButtons>

            <ToastButton Content="Ignore" OnClick="@HideToast"></ToastButton>

            <ToastButton Content="reply"></ToastButton>

        </ToastButtons>

    </SfToast>

    <div class="col-lg-12 col-sm-12 col-md-12 center">

        <div id="toastBtnDefault" style="margin: auto; text-align: center">

            <SfButton @onclick="@ShowToast"> Show Toast </SfButton>

        </div>

    </div>

    <br /><br />

    <div id='result'></div>

</div>

<style>

    #elementToastTime .e-toast-message {

        padding: 10px;

        text-align: center;

    }

    #textbox-contain {

        text-align: initial;

        display: inline-block

    }

</style>

@code {

    SfToast ToastObj;

    private string TextBoxVal { get; set; } = "0";

    private string ToastContent { get; set; } = "<p><img src='https://blazor.syncfusion.com/demos/images/toast/laura.png'></p>";

    private async Task ShowToast()

    {

        await this.ToastObj.ShowAsync();

    }

    private async Task HideToast()

    {

        Console.WriteLine(ToastObj.Content);

        await this.ToastObj.HideAsync();

    }

}

Sample:  https://blazorplayground.syncfusion.com/rjBoNsrmJObqBBsv

This sample demonstrates how you can trigger the toast notification on a button click and hide it when the "Ignore" button is pressed.

Regards,

Yohapuja S

[Nabil]

Hi,

Thank  you for your message but it doesn't solve my problem. In your example, things are quite simple since you have only one Toast, so you can reference it through the ToastObj variable. In my case I have several Toasts displayed at the same time. Each of them has a button and if I click on one of them I need to be able to determine on which one (which toast model) I clicked.

Best regards,

Nabil

[Yohapuja Selvakumaran]

Hi Nabil,

You can display multiple toast notifications with a single button click and manage each instance using the toast reference variable.

For your reference, we have provided a working sample demonstrating this functionality:

Sample: https://blazorplayground.syncfusion.com/rDroZrMpBjAopyQi

Additionally, you can refer to the following documentation for further details on displaying different types of toast notifications:

Documentation: https://blazor.syncfusion.com/documentation/toast/how-to/show-different-types-of-toast

Regards,

Yohapuja S

[Nabil]

Hi  Yohapuja ,

Sorry but this is not my use case. I was talking about buttons inside the toast. If you launch multiple toasts, how do you know on which toast you have clicked in the button's click handler ?

My problem is not how to launch multiple toasts. It is about how to differentiate between them when you click one of them.

Best regards,

Nabil

[Yohapuja Selvakumaran]

Hi Nabil,

You can use a button inside the Toast component and retrieve the respective instance in the click event.

Sample: https://blazorplayground.syncfusion.com/rjVoDhWOSXXZsfiS

Alternatively, you can use an arrow function to get the respective instance.

Sample: https://blazorplayground.syncfusion.com/hDBINBCaeNqyyKPX

Regards,

Yohapuja S