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.
|
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();
}
}
}
}
|
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
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();
}
|
public async Task Show()
{
CssClass = "e-toast-success";
Icon = "e-success toast-icons";
this.StateHasChanged();
await this.ToastObj.Show();
}
|
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
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"); } } |
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
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
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
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
|
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; } } } |
|
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); } } } |
|
@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(); }); }; } } |
|
using MyBlazorServerApp.Components; namespace MyBlazorServerApp { public class Program { public static async Task Main(string[] args) { ... builder.Services.AddScoped<ToastService>(); ... } } } |
|
@using MyBlazorServerApp.Components … … <ToastComponent /> |
|
@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" }); } } } |
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
Welcome,
Please get back to us if you need any further assistance.
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
Hi Vinitha Jeyakumar,
In the source code that you designed in the past, I added the following code.
Page :fetchdata
|
<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> |
Hi Buvana Sathasivam,
It was great. The bug was fixed.
Thank you
Hi Buvana Sathasivam,
I upgraded the following source to version 20.1.0.55. It will no longer be displayed after the upgrade.
thank you
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?
Please let us know if you have any concerns.
Regards,
Buvana S
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
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.
Regards,
Buvana S
