Syncfusion Notifications (Toasts) and Oqtane 5

[Scott Szretter]

Hi, I am working on getting Syncfusion Toast's working well with Oqtane and have partial success but have a couple issues.   

When you first go to the module's page, the toats are not the correct color.  They appear blue instead of green.  After the first couple of toasts they change to green however.

In my sample module, the toasts are appearing reliably in the upper right corner but that is only because I am using a div with an id "toast_pos_target" and the supporting code to make that work.   If you remove the code that sets it to use that target, the notifications are not visible and there is a class being applied that hides the toats.

I invite people to check out the module, especially if you are looking to integrate Syncfusion with Oqtane and share your code or suggestions. 

https://github.com/SSzretter/SPSITECH.Module.SyncfusionNotifications

[Priyanka Karthikeyan]

Hi Scott Szretter,

 

Query1: "When you first go to the module's page, the toats are not the correct color.  They appear blue instead of green.  After the first couple of toasts they change to green however."

 

After reviewing your query and replicating the reported problem on our end, we've identified a potential solution.

 

To address the issue where the SfToast component appears without the CssClass on the first click and then correctly applies the CssClass on subsequent clicks, we recommend adding a minimal time delay to allow for proper detection of property changes in the SfToast component.

 

Here's the updated code snippet incorporating the delay:

 

ToastComp.razor

protected override void OnInitialized()
{
toastService.ShowToastTrigger += (ToastOption options) =>
{
InvokeAsync(async() =>
{
this.Options.Title = options.Title;
this.Options.Content = options.Content;
this.Options.PositionX = options.PositionX;
this.Options.Timeout = options.Timeout;
this.Options.CssClass = options.CssClass;
this.IsToastVisible = true;
this.StateHasChanged();
await Task.Delay(500);
this.Toast.ShowAsync();
});
};
base.OnInitialized();
}
}

 

By introducing a delay of 500 milliseconds (adjust as needed), the reported issue should be resolved. This delay allows sufficient time for the SfToast component to detect and apply the CssClass properly.

 

Query2: "In my sample module, the toasts are appearing reliably in the upper right corner but that is only because I am using a div with an id "toast_pos_target" and the supporting code to make that work.   If you remove the code that sets it to use that target, the notifications are not visible and there is a class being applied that hides the toast."

 

If you prefer not to have the Toast component rely on a target div, such as #toast_pos_target, please ensure that the Target attribute is not explicitly set in the Toast component. 

<SfToast @ref="Toast" [email protected] CssClass="@Options.CssClass" >
    ....
    <ToastPosition X="@Options.PositionX"></ToastPosition>
</SfToast>

 

You can simply remove the Target attribute. This way, the Toast will appear in the default position without needing a specific div element. If you only remove the div element without removing the Target attribute, it will not work as expected. By omitting the Target, the Toast will automatically append itself to the body.

 

Regards,

Priyanka K

Attachment: BlazorServerProject_51c11307.zip