Show only the last 3 messages

[Tim Reismüller]

Hello,

I am trying to find out how to show only a predefined set of toast messages on the screen. I see that Hide method is not documented in the API. The intellisense shows me that I can hide a message with a specific id, but I do not know how to retrieve this id.

From my point of view this could easily be a property of the component.

[Gunasekar Kuppusamy]

Hi Dipl,

Greetings from Syncfusion support.

We have validated your reported query from our end.

You can set the individual id for each toast by setting the Key property in the ToastModel. The Key property value is not defaultly generated by the toast component. So you need to manually pass this value from the application level.

Also, you can receive this toast key value in the Toast events. So using this key value, you can directly access the specific toast and can hide it.

For your reference, We have also prepared a sample for "Show only the last 3 messages".

Code snippets:

@using Syncfusion.Blazor.Notifications

<div id="target">

    <SfToast @ref="toast" Height="150px" Width="200px" Timeout="60" Target="@target" Icon="e-meeting" Title="@title">

        <ToastEvents OnClose="OnClose"></ToastEvents>

    </SfToast>

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

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

            <button class="e-btn" id="toastBtnShow" @onclick="showOnclick">Show Toasts</button>

            <button class="e-btn" id="toastBtnHide" @onclick="hideOnclick">Hide All</button>

            <button class="e-btn" id="toastBtnHide" @onclick="HideOnclick">Hide</button>

        </div>

    </div>

</div>

@code{

    SfToast toast;

    private string target = "#target";

    private string title = "This is Toast Title";

    private int key { get; set; } = 0;

    public List<int> keyLists = new List<int>();

    private async Task showOnclick()

    {

        keyLists.Add(key);

        if (keyLists.Count > 3)

        {

            await this.toast.HideAsync(keyLists[0]);

        }

        await this.toast.ShowAsync(new ToastModel { Key = key, Content = key.ToString(), Timeout = 10000 });

        key++;

    }

    private async Task HideOnclick()

    {

        await this.toast.HideAsync();

    }

    private void OnClose(ToastBeforeCloseArgs args)

    {

        keyLists.RemoveAt(0);

    }

    private async Task hideOnclick()

    {

        await this.toast.HideAsync("All");

    }

}

Sample: https://www.syncfusion.com/downloads/support/forum/169903/ze/Blazor_App697607648

Please check the sample and let us know if you have any concerns

Regards,

Gunasekar