Share Position Context / Update Content of Shown Toast

[Anthony Stewart]

Hi,

I've created a notification system for showing Toast Notifications to the user which other systems can publish notifications to. I want to update the content of Toast that has already been shown to the user, specifically to show the user a progress bar that shows the status of another system. I've tried two approaches to do this:

1. I have a Notification component that has the SfToast component, it takes the notifications and shows them using ShowAsync with the ToastModel parameter.
   1. Is there a way to update the content of a toast displayed using ShowAsync with the ToastModel parameter?
      
2. I created several components that each have an SfToast and then one Notification component that dynamically shows them using the built-in DynamicComponent and a foreach loop. This has the benefit of keeping logic for handling the different notifications separate. The problem with this method is that toasts get rendered in the same position, so you only see the latest toast.
   1. Is there a way to share position context between multiple SfToast instances so that they get stacked like they do when using  ShowAsync with the ToastModel parameter?
      

[Vinitha Jeyakumar]

Hi Anthony,

Your requirement to dynamically change the toast content can be achieved by using the Toast template. please check the code and sample below,

Code snippet:

<SfToast @ref="ToastObj" >

       <ToastTemplates>

        <Template>

            <div>              

                @ToastContent

            </div>

        </Template>

    </ToastTemplates>

</SfToast>

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

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

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

        <SfButton @onclick="@Change"> Change content </SfButton>

    </div>

</div>

@code {

    

    SfToast ToastObj;

    public string ToastContent = "Initial content";

    public void Change()

    {

        this.ToastContent = "Dynamic content";

        

    }

   

    private async Task ShowToast()

    {       

        await Task.Delay(100);

        this.ToastObj.ShowAsync();

     

    }

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ToastServer-1660663924

Documentation: https://blazor.syncfusion.com/documentation/toast/template

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Vinitha

[Anthony Stewart]

The Toast template did work for setting dynamic content, thanks!
Is it possible to share position context like I mentioned in my second point?

[Vinitha Jeyakumar]

Hi Anthony,

The toast position can be updated based on predefined positions or customizable positions. The predefined position combinations are updated in the X and Y position properties and Custom X and Y positions can be given as pixels/numbers/percentage. please check the code below,

Code snippet:

<SfToast @ref="ToastObj" >

       <ToastTemplates>

        <Template>

            <div>              

                @ToastContent

            </div>

        </Template>

    </ToastTemplates>

    <ToastPosition X="@PositionX" Y="@PositionY"></ToastPosition>

</SfToast>

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

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

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

        <SfButton @onclick="@Change"> Change content </SfButton>

    </div>

</div>

@code {

    public bool flag = false;

    SfToast ToastObj;

     private string PositionX = "Center";

    private string PositionY = "Bottom";

    public string ToastContent = "Initial content";

    public void Change()

    {

        this.ToastContent = "Dynamic content";

        this.flag = true;

    }

   

    private async Task ShowToast()

    {       

        await Task.Delay(100);

        this.ToastObj.ShowAsync();

     

    }

}

Documentation: https://blazor.syncfusion.com/documentation/toast/position

Demos: https://blazor.syncfusion.com/demos/toast/position?theme=fluent

Regards,

Vinitha