We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Weird Toast Behavior. First Instance not rendering Content.

Hi Syncfusion Team,

First I'm using Blazor Server Net 6 and Syncfusion Version 20.3.0.56 (Individually downloaded component from Nuget).

I have this weird TOAST behavior. On first button click the Content has no value. But on the second button click the Content has value but it the is from the previous button click. So every time I click a button the value of the content is from the previous button click event. I tried putting the following:

  await Task.Delay(1000) and this.StateHasChanged()

No effect whatsoever. The bug is still there. My Toast is simple. No customization.

My Code Below:

    public string ToastContent { get; set; } = String.Empty;
    SfToast ToastObj;

My Toast:

    <SfToast ID="toast_default" Title="Status Updated" Content="@ToastContent" @ref="ToastObj" Timeout="500" Width="200">
        <ToastPosition X="Center" Y="Bottom"></ToastPosition>
    </SfToast>

My Methods:

    private async Task UpdateResponding()
    {
        int Success = await GlobalStatusUpdateService.GlobalStatusUpdate("Responding", Global.UserID);


        if (Success == 99)
        {
            //error
            GenericMessage = "No EMR Selected!";
            await this.GenericDialog.ShowAsync();
        }
        else
        {
            CurrentStatus = "Responding";
            cssStatus = "badge bg-success";


            await Task.Delay(1000);
            this.StateHasChanged();


            ToastContent = CurrentStatus;
            await this.ToastObj.ShowAsync();
        }
    }


 private async Task UpdateNotResponding()
    {
        int Success = await GlobalStatusUpdateService.GlobalStatusUpdate("Not Responding", Global.UserID);


        if (Success == 99)
        {
            //error
            GenericMessage = "No EMR Selected!";
            await this.GenericDialog.ShowAsync();
        }
        else
        {
            CurrentStatus = "Not Responding";
            cssStatus = "badge bg-danger";


            this.StateHasChanged();
            await Task.Delay(1000);
            ToastContent = CurrentStatus;
            await this.ToastObj.ShowAsync();
        }
    }


private async Task UpdateStandingBy()
    {
        int Success = await GlobalStatusUpdateService.GlobalStatusUpdate("Standing By", Global.UserID);


        if (Success == 99)
        {
            //error
            GenericMessage = "No EMR Selected!";
            await this.GenericDialog.ShowAsync();
        }
        else
        {
            CurrentStatus = "Standing By";
            cssStatus = "badge bg-info";


            this.StateHasChanged();
            ToastContent = CurrentStatus;
            await this.ToastObj.ShowAsync();
        }
    }


    private async Task UpdateOnScene()
    {
        int Success = await GlobalStatusUpdateService.GlobalStatusUpdate("On Scene", Global.UserID);


        if (Success == 99)
        {
            //error
            GenericMessage = "No EMR Selected!";
            await this.GenericDialog.ShowAsync();
        }
        else
        {
            CurrentStatus = "On Scene";
            cssStatus = "badge bg-secondary";


            this.StateHasChanged();
            ToastContent = CurrentStatus;
            await this.ToastObj.ShowAsync();
        }
    }

4 Replies 1 reply marked as answer

OT oliver tejada November 20, 2022 01:34 PM

Uploaded a video of the Toast anomaly.


Attachment: ToastVid_ea399af9.7z


VJ Vinitha Jeyakumar Syncfusion Team November 21, 2022 01:53 AM

Hi Oliver,


We suggest you to call StateHasChanged() and a Delay method after updating the content property like as follows to resolve the reported issue,

Code snippet:
    <SfToast ID="toast_default" Title="Status Updated" Content="@ToastContent" ShowCloseButton="true" @ref="ToastObj" Timeout="500" Width="200">
        <ToastPosition X="Center" Y="Bottom"></ToastPosition>
    </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" @onclick="@UpdateResponding">Toast 1</button>
            <button class="e-btn" @onclick="@UpdateNotResponding">Toast 2</button>
            <button class="e-btn" @onclick="@UpdateStandingBy">Toast 3</button>
            <button class="e-btn" @onclick="@UpdateOnScene">Toast 4</button>
            <div>@CurrentStatus</div>
@code {
    public string CurrentStatus {get; set;}
    public string ToastContent { get; set; }
    SfToast ToastObj;
     private async Task UpdateResponding()
    {      
            CurrentStatus = "Responding";        
            ToastContent = CurrentStatus;
            StateHasChanged();
            await Task.Delay(100);
            await this.ToastObj.ShowAsync();
     
    }
    private async Task UpdateNotResponding()
    {
            CurrentStatus = "Not Responding";
            ToastContent = CurrentStatus;
            StateHasChanged();
            await Task.Delay(100);
            await this.ToastObj.ShowAsync();
       
    }
    private async Task UpdateStandingBy()
    {
            CurrentStatus = "Standing By";
            ToastContent = CurrentStatus;
            StateHasChanged();
            await Task.Delay(100);
            await this.ToastObj.ShowAsync();
       
    }
    private async Task UpdateOnScene()
    {
            CurrentStatus = "On Scene";
            ToastContent = CurrentStatus;
            StateHasChanged();
            await Task.Delay(100);
            await this.ToastObj.ShowAsync();
    }
}

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

Regards,
Vinitha

Marked as answer

OT oliver tejada November 21, 2022 03:26 AM

Solution is working. 

Thank you Syncfusion Team. 👍



VJ Vinitha Jeyakumar Syncfusion Team November 21, 2022 11:57 PM

Hi Oliver,


We are glad to assist you.

Regards,
Vinitha

Loader.
Live Chat Icon For mobile
Up arrow icon