do not display toast content in first time | Blazor Forums

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

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 06:05 AM

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.

Sample: https://www.syncfusion.com/downloads/support/forum/151362/ze/SfToast_show-1989835678

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 09:45 AM

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.

Sample: https://www.syncfusion.com/downloads/support/forum/151362/ze/SfToast_show-1989835678

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 01:48 AM

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.

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

Regards,

Indrajith

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

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?

<Title>

@ToastTitle

</Title>

@ToastContent

</Content>

</ToastTemplates>

</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 05:40 AM

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();

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfToast_property_change-29966173

SA Sarah replied to Indrajith Srinivasan December 15, 2021 07:38 AM

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 02:27 AM

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>

<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

<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 12:55 AM

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 09:04 AM

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 04:51 AM

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 08:06 AM

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

Create folder Components in the root folder
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; }

}

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);

}

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();

});

};

}

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>();

...

}

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

@using MyBlazorServerApp.Components

…

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 07:36 AM

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 06:58 AM

Welcome,

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

SA Sarah January 11, 2022 12:31 PM

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 09:54 AM

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 12:58 AM

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 12:17 PM

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 05:12 AM

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>

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

Please let us know if you have any other concerns.

Regards,

Buvana S

SA Sarah January 18, 2022 08:56 AM

Hi Buvana Sathasivam,

It was great. The bug was fixed.

Thank you

BS Buvana Sathasivam Syncfusion Team January 18, 2022 10:07 PM

Hi Sarah,

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 01:01 AM

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 03:11 AM

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

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 16, 2022 11:04 PM

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 18, 2022 10:32 PM

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