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

do not display toast content in first time

Please see Attached video.

<MyEjsToast @ref="MyEjsToast" Target="#toast_pos_target" XPosition="ToastXPosition.Center" Height="150px"  YPosition="ToastYPosition.Top" 
            Title="@PayAttentionLabel.Field" 
            ShowCloseButton="true" ShowProgressBar="true" Content="@validationMessage" TimeOut="7000">

</MyEjsToast>

 async Task ShowValidatioMessage()
    {
        if (!ValidationResult.FieldIsValid)
        {
            var message = ValidationResult.Messages.FirstOrDefault();
            if (message != null)
            {
                if (ValidationResult.Messages.FirstOrDefault() != "")
                {

                    validationMessage = ValidationResult.Messages.FirstOrDefault();
                    //await Task.Delay(100);

                    await  MyEjsToast.RefToast.Show();

                }
            }
        }
    }

Attachment: ToastContent_3ff4cc07.zip

25 Replies

IS Indrajith Srinivasan Syncfusion Team February 10, 2020 10:39 AM UTC

Hi Ebi, 
 
Greetings from Syncfusion support, 
 
We have validated your reported query “the new content value is not updated in the Toast model for the first-time”. Since the value dynamically updated and show method is invoked immediately, the content is not showing the updated content on toast notification. So, we suggest you call toast Show() method after some delay as follows. 
 
 
 async Task ShowValidatioMessage() 
    { 
        if (!ValidationResult.FieldIsValid) 
        { 
            var message = ValidationResult.Messages.FirstOrDefault(); 
            if (message != null) 
            { 
                if (ValidationResult.Messages.FirstOrDefault() != "") 
                { 
 
                    validationMessage = ValidationResult.Messages.FirstOrDefault(); 
                    await Task.Delay(100); // Delay to update the content changes in Toast model 
 
                    await  MyEjsToast.RefToast.Show(); 
 
                } 
            } 
        } 
    } 
 
 
Can you please try out the above solution and let us know if you face any difficulties? 
 
Regards, 
Indrajith 



IS Indrajith Srinivasan Syncfusion Team May 18, 2020 11:05 AM UTC

Hi Gopalakrishnan,

Greetings from Syncfusion support,

We have validated your reported query. We have prepared a sample with the SfToast shown on Data removed from Database and SfToast showing on a button click which works fine. In the below example the following configurations are done.
 
 
  • Showing SfToast on button click.
  • Remove data from the Grid Database using the Delete Icon and showing the SfToast once it is deleted.
 
 
Can you please share us the following details, 
 
  • Can you please share the video demo of the issue reproducing scenario
  • If possible can you please replicate, the issue in the above sample and revert back to us.
  • Are you able to reproduce the reported issue in the above sample?
  • Nuget Version you are facing issue with SfToast?
 
If we are able to reproduce the issue from our end we will validate and provide the solution at earliest. 
 
Regards, 
Indrajith 



SH Stefan Heimbach replied to Indrajith Srinivasan December 23, 2020 02:45 PM UTC

Hi Gopalakrishnan,

Greetings from Syncfusion support,

We have validated your reported query. We have prepared a sample with the SfToast shown on Data removed from Database and SfToast showing on a button click which works fine. In the below example the following configurations are done.
 
 
  • Showing SfToast on button click.
  • Remove data from the Grid Database using the Delete Icon and showing the SfToast once it is deleted.
 
 
Can you please share us the following details, 
 
  • Can you please share the video demo of the issue reproducing scenario
  • If possible can you please replicate, the issue in the above sample and revert back to us.
  • Are you able to reproduce the reported issue in the above sample?
  • Nuget Version you are facing issue with SfToast?
 
If we are able to reproduce the issue from our end we will validate and provide the solution at earliest. 
 
Regards, 
Indrajith 


If I run your Sample I get this error: "The type Syncfusion.Blazor.Notifications.SfToast cant be converted in MyProject.MessageBox"


IS Indrajith Srinivasan Syncfusion Team December 24, 2020 06:48 AM UTC

Hi Stefan, 
 
We have checked the shared sample, and it works fine without any errors. We are also attaching, the sample again in this thread. 
 
 
Regards, 
Indrajith 



SA Sarah replied to Indrajith Srinivasan December 14, 2021 06:17 AM UTC

Hi  Indrajith Srinivasan,

I checked your code and put a background color and icon for Tost in your code and it works successfully. If we want, based on the data that the user enters, I put an icon and a background color for the toast at runtime, but unfortunately it is not displayed. Is it possible to help?



<SfToast @ref="ToastObj" NewestOnTop="true" ShowProgressBar="true" ShowCloseButton="true" TimeOut="3000" Icon="@Icon" CssClass="@CssClass">

    <ToastTemplates>

        <Title>

            @ToastTitle

        </Title>

        <Content>

            @ToastContent

        </Content>

    </ToastTemplates>

    <ToastPosition X="Center"></ToastPosition>

</SfToast>



@code {


    SfToast ToastObj;


    [Parameter]

    public string ToastTitle { get; set; } = "Notification Toast";


    [Parameter]

    public string ToastContent { get; set; }


    [Parameter]

    public string CssClass { get; set; }


    [Parameter]

    public string Icon { get; set; }


    public async Task Show()

    {

        CssClass = "e-toast-success";

        Icon = "e-success toast-icons";

        await Task.Delay(1000);

        await this.ToastObj.Show();

    }



IS Indrajith Srinivasan Syncfusion Team December 15, 2021 10:40 AM UTC

Hi Sarah, 
 
We suggest you to call the Blazor StateHasChanged() method, to detect the property changes for the SfToast component. Check the below shared code blocks and sample for reference. 
 
 
   public async Task Show() 
    { 
        CssClass = "e-toast-success"; 
        Icon = "e-success toast-icons"; 
        this.StateHasChanged(); 
        await this.ToastObj.Show(); 
    } 
 
 



SA Sarah replied to Indrajith Srinivasan December 15, 2021 12:38 PM UTC

Hi Indrajith Srinivasan,

Thank you very much. The bug was fixed.

Suppose we are in the index.razor page and the user enters the create.razor page for a new registration. On this page, after the user successfully completes the operation, I display the successful operation with my component toast(syncfusion toast). Then I redirect immediately to the index.razor, in this case, toat is not displayed. For the solution after creation, I gave a delay with a Task.Delay(3000) and then I went to the index.razor to display the toat. The problem is the delay between the pages.

 Is it possible not to use delay?

Maybe one of the solutions is to put the toat component in the home page so that there is no problem in displaying the toast in exchange for moving between pages. Unfortunately I could not do that.

Thank you



IS Indrajith Srinivasan Syncfusion Team December 16, 2021 07:27 AM UTC

You can also use the SfToast as a reusable component, configuring the component in the shared page (similar to mainlayout configurations) and calling it from other pages. A minimal time delay is needed, to detect the property changes for the SfToast component. Check the below shared code blocks and sample for reference.


Code blocks:


Index.razor

 

<button class="e-btn" @onclick="@ShowDialog">Show Toast</button>

<button class="e-btn" @onclick="@HideOnClick">Hide All</button>

 

<ToastComponent @ref="ToastObj" Title="@ToastTitle" Content="@ToastContent"></ToastComponent>

 

@code {

    ToastComponent ToastObj;

    public string ToastTitle { get; set; } = "";

    private string ToastContent { get; set; } = "";

 

    private async Task ShowDialog()

    {

        await this.ToastObj.Show();

    }

    private void HideOnClick()

    {

        this.ToastObj.Hide("All");

    }

}


ToastComponent.razor

 

@using Syncfusion.Blazor.Notifications

 

<div class="col-lg-12 control-section toast-default-section">

    <SfToast @ref="ToastObj" Title="@Title" Content="@Content" Icon="@Icon" CssClass="@CssClass">

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

    </SfToast>

</div>

 

@code {

    SfToast ToastObj;

    [Parameter]

    public string Title { get; set; } = "";

    [Parameter]

    public string Content { get; set; } = "";

    [Parameter]

    public string CssClass { get; set; } = "";

    [Parameter]

    public string Icon { get; set; } = "";

 

    public async Task Show()

    {

        this.CssClass = "e-toast-success";

        this.Icon = "e-success toast-icons";

        this.Title = "Toast Title";

        this.Content = "Toast Content";

        this.StateHasChanged();

        await Task.Delay(500);

        await this.ToastObj.ShowAsync();

    }

    public void Hide(object element = null)

    {

        this.ToastObj.Hide("All");

    }

}


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfToast_as_component_reusable-477089919



SA Sarah December 18, 2021 05:55 AM UTC

Hi  Indrajith Srinivasan,

I edited your code according to my needs. In this code, in addition to wanting toast to be displayed, on the other hand, I want it to be redirected to another page immediately. For this reason, I suggested whether it is possible to put the toast on the home page so that there is no problem in displaying the toast by moving between pages.

Thank you


Attachment: CreateaDialogComponentinaBlazorServerApplicationmaster_b1b845f.rar


IS Indrajith Srinivasan Syncfusion Team December 20, 2021 02:04 PM UTC

We have checked the shared sample, in blazor with the page routing the current page will be destroyed and the new page will be rendered. We suggest you to call the SfToast, in the OnAfterRenderAsync blazor lifecyle in the page to be navigated. Check the below modified sample and code blocks for reference.


Counter.razor


 

<MyToast @ref="@myToast" Content=@Content></MyToast>

 

@code {

    MyToast myToast;

 

    public string Content { get; set; }

 

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

      if (firstRender)

      {       

        await this.myToast.ShowToast("CRUD message");

      }

    }

}

 


Sample: https://www.syncfusion.com/downloads/support/forum/151362/ze/Modified_sample1205572868



SA Sarah December 22, 2021 09:51 AM UTC

Hi Indrajith Srinivasan,

Unfortunately, the suggested code does not fix the bug. At OnAfterRenderAsync we do not know why we were redirected to the current page. Is it possible to put Toast in the Index (Home page)? If possible, a queue can be placed in the Index to display all messages sent from different pages.

Thank you



IS Indrajith Srinivasan Syncfusion Team December 23, 2021 01:06 PM UTC

Can you try the below way, by creating reusable SfToast as a service. Check the below shared code blocks and sample for reference.


Follow below steps to configure the reusable SfToast


  1. Create folder Components in the root folder
  2. Add ToastOptions.cs class file and add below codes (If require more SfToast properties, add and configure in ToastComponent)


using Microsoft.AspNetCore.Components; 

using Syncfusion.Blazor.Notifications;

namespace MyBlazorServerApp.Components

{ 

  public class ToastOptions

  {

    public string Title { get; set; }

    public string CssClass { get; set; }

    public string Icon { get; set; }

    public string Content { get; set; }

    public SfToast ToastObj { get; set; }

  }

} 


  1. Add ToastService.cs class file and add below codes


using System; 

using Microsoft.AspNetCore.Components; 

namespace MyBlazorServerApp.Components

{ 

    public class ToastService

  {

    public event Action<ToastOptions> ToastInstance;

 

    public void Open(ToastOptions options)

    {

      // Invoke ToastComponent to update and show the toast with options

      this.ToastInstance.Invoke(options);

    }

  }

} 


  1. Add ToastComponent.razor file and add below codes


@using Syncfusion.Blazor.Notifications;

 

 

<SfToast @ref="ToastOptions.ToastObj" ShowProgressBar="true" ShowCloseButton="true" CssClass="@ToastOptions.CssClass" Icon="@ToastOptions.Icon">

  <ToastTemplates>

    <Title>

      @ToastOptions.Title

    </Title>

    <Content>

      @ToastOptions.Content

    </Content>

  </ToastTemplates>

</SfToast>

 

@code { 

    [Inject]

  public ToastService ToastService { get; set; }

 

    // Parameter

  private ToastOptions ToastOptions = new ToastOptions(); 

    protected override async Task OnInitializedAsync()

    {

      // Update the parameter in local variable and render the toast

      ToastService.ToastInstance += (ToastOptions options) =>

      {

        InvokeAsync(async () =>

        {

          this.ToastOptions.Title = options.Title;

          this.ToastOptions.Content = options.Content;

          this.ToastOptions.CssClass = options.CssClass;

          this.ToastOptions.Icon = options.Icon;         

          this.StateHasChanged();

          await Task.Delay(500);

          await this.ToastOptions.ToastObj.ShowAsync();

        });

      };

    }

} 


  1. Register the ToastService in the Startup.cs file as like below


using MyBlazorServerApp.Components;

namespace MyBlazorServerApp

{ 

    public class Program 

    { 

        public static async Task Main(string[] args) 

        { 

            ...     

            builder.Services.AddScoped<ToastService>(); 

            ... 

        } 

    } 

} 


  1. Initialize the ToastComponent, end of the MainLayout.razor file for update the instance in ToastService


@using MyBlazorServerApp.Components 

 

 

<ToastComponent /> 


  1. Add below code in Counter.razor file and run the application


@page "/" 

@using Dialog.Components 

 

@inject ToastService ToastServices  

 

@code { 

   protected override async Task OnAfterRenderAsync(bool firstRender)

      {

        if (firstRender)

        {

          this.ToastServices.Open(new ToastOptions()

          {

                  Title = "Toast title",

                  Content = "CRUD message",

                  Icon = "e-success toast-icons",

                  CssClass = "e-toast-success"

          });

        }

      }

  


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfToast_as_service_server351129959



SA Sarah December 25, 2021 12:36 PM UTC

Hi  Indrajith Srinivasan,

The bug was fixed. Thank you for explaining the reason for using the service. For example, I used SfSidebar in the past and put a label in the sfsidebar header, and I wanted to put text in the sidebar header by opening each page, but I did not succeed. According to your code, apparently I have to use the service to do this.

Thank you



IS Indrajith Srinivasan Syncfusion Team December 27, 2021 11:58 AM UTC

Welcome,

Please get back to us if you need any further assistance.



SA Sarah January 11, 2022 05:31 PM UTC

Hi Indrajith Srinivasan,


I saw a bug. In OnInitializedAsync I check if the user has access to the current page. If it does not have access, I will display a message with toast that is not available and I will redirect to the main page. When redirected from one of the site pages (for example, the main page), a toast message will be displayed to the page that does not have access, but Toast is not displayed when the user types the page address directly in the browser's address bar.


Thank you




VJ Vinitha Jeyakumar Syncfusion Team January 12, 2022 02:54 PM UTC

Hi Sarah,


We suspect that the issue occurred due to conditions added, while checking the accessibility in the OnInitializedAsync.  please check whether it passes the condition or not when user types the page address directly at browser's address bar. 

If even after conditions got failed for access and still toast has not been displayed on the page, please share us with runnable issue reproducing sample to further validate on the issue.

Regards,
Vinitha



SA Sarah January 13, 2022 05:58 AM UTC

Hi  Vinitha Jeyakumar,


In the source code that you designed in the past, I added the following code.

 https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfToast_as_service_server351129959


Page :fetchdata






BS Buvana Sathasivam Syncfusion Team January 14, 2022 05:17 PM UTC

Hi Sarah, 
 
Currently, we are validating your reported query. We will update you with further details on or before January 18, 2022. 
 
Regards, 
Buvana S 



BS Buvana Sathasivam Syncfusion Team January 18, 2022 10:12 AM UTC

Hi Sarah, 

Thank you for your patience. 
We have checked your reported problem and were able to reproduce it. To solve your issue, you can initialize the ToastComponent on the App.razor page instead of the MainLayout.razor page. 
App.razor 
<Router AppAssembly="@typeof(Program).Assembly"> 
    <Found Context="routeData"> 
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> 
        <ToastComponent /> 
    </Found> 
    <NotFound> 
        <LayoutView Layout="@typeof(MainLayout)"> 
            <p>Sorry, there's nothing at this address.</p> 
        </LayoutView> 
    </NotFound> 
</Router> 
 


Please let us know if you have any other concerns. 

Regards, 
Buvana S 



SA Sarah January 18, 2022 01:56 PM UTC

Hi  Buvana Sathasivam,


It was great. The bug was fixed.


 Thank you



BS Buvana Sathasivam Syncfusion Team January 19, 2022 03:07 AM UTC

 
We are glad that your reported issues are resolved. Please get back to us if you need any further assistance. 

Regards, 
Buvana S 




SA Sarah May 14, 2022 06:01 AM UTC

Hi  Buvana Sathasivam,


I upgraded the following source to version 20.1.0.55. It will no longer be displayed after the upgrade.


https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfToast_as_service_server351129959_(2)-1890568191 


thank you



BS Buvana Sathasivam Syncfusion Team May 16, 2022 08:11 AM UTC

Hi Sarah,


We have added breaking changes to the 20.1.47 version to add the script and style references. You can enable or disable the IgnoreScriptIsolation property. In the below sample, we have enabled IgnoreScriptIsolation.


Startup.cs

services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });

So, you need to manually refer to the script and styles file like below.

Note: You need to install Syncfusion.Blazor.Themes nuget package for referring styles.

_Host.cshtml

<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>


https://blazor.syncfusion.com/documentation/common/adding-script-references


Release Notes: https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes


We have upgraded the sample to the 20.1.0.55 version with the above breaking changes. Can you please find the below sample?

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfToast_as_service_server1205958953


Please let us know if you have any concerns.


Regards,

Buvana S



SA Sarah May 17, 2022 04:04 AM UTC

Hi,


Thank you. The bug has been fixed. In the folowing code:


services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });


How options.EnableRtl = true; Or options.EnableRtl = true;  Can I add?


Thank you



BS Buvana Sathasivam Syncfusion Team May 19, 2022 03:32 AM UTC

Hi Sarah,


Thank you for your update. We have included the class name in the SfToast component root element when enabling the RTL mode. So, we suggest including the following code to enable the RTL mode.


ToastComponent.razor

@if(@ToastOptions.EnableRtl) {

    <SfToast @ref="ToastOptions.ToastObj" ShowProgressBar="true" ShowCloseButton="true" CssClass="@ToastOptions.CssClass" Icon="@ToastOptions.Icon" EnableRtl=@ToastOptions.EnableRtl>

        <ToastTemplates>

            <Title>

                @ToastOptions.Title

            </Title>

            <Content>

                @ToastOptions.Content

            </Content>

        </ToastTemplates>

    </SfToast>

}

else

{

    <SfToast @ref="ToastOptions.ToastObj" ShowProgressBar="true" ShowCloseButton="true" CssClass="@ToastOptions.CssClass" Icon="@ToastOptions.Icon">

        <ToastTemplates>

            <Title>

                @ToastOptions.Title

            </Title>

            <Content>

                @ToastOptions.Content

            </Content>

        </ToastTemplates>

    </SfToast>

}

@code {

protected override async Task OnInitializedAsync()

    {

        // Update the parameter in local variable and render the toast

        ToastService.ToastInstance += (ToastOptions options) =>

        {

            InvokeAsync(async () =>

      {

          this.ToastOptions.EnableRtl = options.EnableRtl;

          this.StateHasChanged();

          await Task.Delay(500);

          await this.ToastOptions.ToastObj.ShowAsync();

        });

      };

    }

}


ToastOptions.cs

public class ToastOptions

  {

    …..

    public bool EnableRtl { get; set; }    

}


We have modified the already shared sample with the EnableRtl property. Please find the below sample for your reference.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfToast_as_service_server351129959489054955


Regards,

Buvana S


Loader.
Live Chat Icon For mobile
Up arrow icon