Using the approach in the example code of "OneNotificationPerApp" works great for non-modal forms.   However, modal forms that use this approach do show the notfication but its in the background,  not easily visible.  Is there a way to change that?  I tried chaning the z order to a high number but that didn't work.  Any suggestions would be great.  Thanks in advance!

Let me know if you need to see the code and I can zip it up and attach it.

https://github.com/telerik/blazor-ui/tree/master/notification/single-instance-per-app

Even if the TelerikNotification Component is not visible it kind of blocks the Textbox for getting focused. I made a screenshot to demonstrate that with the BrowserTools. I only can focus the Textbox if I am clicking in the area marked with the red box.

Is there a solution for it ?

Hello,

After updating to 4.3.0 for Blazor, the close button on the notifications seem to be appearing at the bottom left.

Thanks,

Tony

I recall being told I would have access to source code once I buy a licence.

Now that I have a licence, how do I get access to the source so I can do a local build?

Hello,

I have a scenario where I have a Telerik Notification with a Telerik progress bar embedded.  I am looking to update the progress bar of multiple instances of the notification independently based in separate threads.

Would this be possible?

Thanks,

Tony

 If I have multiple incoming notifications, how do I limit the number that are visible ? Is there a property to set or is there a way I can programmatically remove certain toasts?

Thank you

I have a notification component defined on my MasterLayout page like below.   and then shared with all my other pages via a cascading parameter.

<TelerikNotification @ref="@NotificationReference" AnimationType="@AnimationType.ZoomOut" Class="notification"
                                                 HorizontalPosition="NotificationHorizontalPosition.Center" VerticalPosition="NotificationVerticalPosition.Top"/>

Everything works fine, but I am noticing that if i am scrolled down on a child page, the notification stays at the top of the page (off the visible screen) instead of being relative to the top of the window.  How can i make sure the notification is always visible to the end users regardless of how far down a page they might be scrolled too?

Thanks in advance,

Probably I do something very simple wrong but I try to follow the single instance per app example and if I debug my code I can see the cascading variable getting the instance.

I can send the following code without any error in the code or in the console of my browser

Notification.Instance.Show(new NotificationModel
{
    Text = "TEST",
    ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
    CloseAfter = 30000,
    Closable = true
});

But I will not see the notification on screen.
It doesn't matter if this is somewhere in the code or in the 

protected override async Task OnAfterRenderAsync(bool firstRender)

or 

protected override void OnInitialized()

This turned out to be a cache problem. Thought I cleared it, but apparently not. Today it works.

I'm trying to implement some very basic toast notifications in a simple form WASM app.

There are two code paths where notifications would be displayed, based on form data. One of them works perfectly every time. The other refuses to work at all, despite the code being called.

I've tried all of the usual Visual Studio things (clean, deleting bin/obj, restarting, etc.) and the behavior persists. There's nothing in the browser's console to indicate a failure.
This is my first attempt at using a Telerik control. It's also my first real Blazor app. Maybe there's something basic I didn't do correctly that's causing weird side effects. Nothing else really makes sense considering how simple this code is.

Here's the UI bits...

<TelerikNotification @ref="@NotificationReference" Class="MyTelerikNotification" VerticalPosition=NotificationVerticalPosition.Top HorizontalPosition=NotificationHorizontalPosition.Center></TelerikNotification>
<h3>@FlightTitle</h3>
<ul>
    @foreach (var question in ThisFlightForm.Form.TrueFalseQuestions)
    {
        <FormQuestionTrueFalse thisFormItem=question />
    }
</ul>
<div>
    <button @onclick="OnClick_BtnSubmit" class="btn">Submit</button>
    <button @onclick="OnClick_BtnCancel" class="btn">Cancel</button>
</div>

Inside the code block is the Notification Reference declaration:

public TelerikNotification NotificationReference { get; set; } = new();

Here's the method call that's having issues. The obvious thing to check is the value of canSubmit, which works perfectly fine.
If I put the ShowToasts calls from the IF down into the ELSE, they are fine.

private void OnClick_BtnSubmit()
    {
        var canSubmit = _preSubChecks.CanFormBeSubmitted(ThisFlightForm);
        if (canSubmit.ChecksPassed)
        {
            //this does not work at all, despite being called
            ShowToasts($"Unable to submit form - {canSubmit.ErrorMsg}", ThemeConstants.Notification.ThemeColor.Error);
            ShowToasts("Submitting Form", ThemeConstants.Notification.ThemeColor.Info);
            ShowToasts("Success!", ThemeConstants.Notification.ThemeColor.Success);
        }
        else
        {   //this works fine
            ShowToasts($"Unable to submit form - {canSubmit.ErrorMsg}", ThemeConstants.Notification.ThemeColor.Error);
        }

    }

Here's the method that shows the toast notifications. I added a temp var and a console out so I could verify the object wasn't null for some reason.

private void ShowToasts(string msg, string toastType)
    {
        var tmpNm = new NotificationModel()
            {
                Text = msg,
                ThemeColor = toastType,                
            };
        NotificationReference.Show(tmpNm);
        Console.WriteLine(JsonConvert.SerializeObject(tmpNm));
    }

Here's the output from the console logs where the Notification control refuses to display (the if):

{"ThemeColor":"error","Closable":true,"CloseAfter":5000,"ShowIcon":true,"Icon":null,"Text":"Unable to submit form - "}
{"ThemeColor":"info","Closable":true,"CloseAfter":5000,"ShowIcon":true,"Icon":null,"Text":"Submitting Form"}
{"ThemeColor":"success","Closable":true,"CloseAfter":5000,"ShowIcon":true,"Icon":null,"Text":"Success!"}

The first Notification (the error) is only here just to make sure the problem wasn't the content or the Notification display type being a problem.

Here's the output from the one that works (the else):

{"ThemeColor":"error","Closable":true,"CloseAfter":5000,"ShowIcon":true,"Icon":null,"Text":"Unable to submit form - At least one question was not answered"}

Aside from the Text, this is exactly the same as the error notification I put into the code that refuses to work.