Questions on UI for Blazor Forum

1 answer

20 views

How can I show a Notification at startup when using InteractiveServer

I want to show an error if data load fails in OnInitializedAsync. I will save the message in a variable and show it in OnAfterRenderAsync or OnAfterRender.

The toast work when the page is fully loaded and I press the button
I am very open for suggestion on showing messages in another way

I have tried all the life cycle handler but in theory this should work.

public partial class TelerikTest
{
    [Inject] public IJSRuntime JsRuntime { get; set; }
    [Inject] public NavigationManager Navigation { get; set; }
    private TelerikNotification NotificationReference { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender && Navigation.Uri.StartsWith("https"))
        {
            StateHasChanged();
            ShowErrorNotification();
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && Navigation.Uri.StartsWith("https"))
        {
            await JsRuntime.InvokeVoidAsync("console.log", "Component rendered!");
            StateHasChanged();
        }
    }
    
    private void ShowErrorNotification()
    {
        NotificationReference.Show(new NotificationModel
        {
            Text = "An error has occurred!",
            ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
            Closable = true,
            CloseAfter = 20000
        });
    }
}

Notification

answered on 01 Aug 2025

2 answers

38 views

Changing Notification size isn't working?

In my _Host.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <component type="typeof(ApplicationInsightsInit)" render-mode="ServerPrerendered" />
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css?@telerikUiForBlazorVersion" rel="stylesheet" />
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-font-icons/font-icons.css" rel="stylesheet" />
    <link href="lib/fontawesome/css/all.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet" />

In my Site.css

.TelerikNotification .k-notification-container .k-notification {
    width: 300px;
    height: 50px;
    font-size: 1.5em;
    text-align: center;
}

.wide-notification-center .k-notification {
    width: 750px;
    height: 70px;
    font-size: 1.5em;
    text-align: center;
}

Blazor Page

<TelerikNotification @ref="@NotificationRefWide" Class="wide-notification-center" HorizontalPosition="@NotificationHorizontalPosition.Center" AnimationDuration="3000"></TelerikNotification>

C# page code (server side)

public TelerikNotification NotificationRefWide { get; set; }



                    NotificationRefWide.Show(new NotificationModel()
                    {
                        Text = "Warning: " + message,
                        ThemeColor = ThemeConstants.Notification.ThemeColor.Warning,
                        Closable = true,
                        CloseAfter = duration,
                        Icon = FontIcon.WarningTriangle,
                        ShowIcon = true
                    });

Any changes I make in the Site.css have ZERO impact on the display of the notification (see attached image). In fact, I can remove the class definitions from CSS and still get the same results. It's as if Telerik Notification is completely ignoring the class reference?

Any suggestions?

Rob.

Notification

answered on 21 May 2025

1 answer

114 views

How can I create a better looking notification?

I would like to create a notification that looks like this.

I like that it has a header and a body. Also that the alert color is bound to the icon

As I see it I need some container elements to pull it off, but I am in no way a css expert 😉

here is the html generated by Telerik

<div class="k-notification k-notification-secondary k-notification-closable">
  <span class="k-notification-status k-icon k-svg-icon k-svg-i-info-circle">
    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M288 352h32v32H192v-32h32v-96h-32v-32h96zm0-224h-64v64h64zm192 128c0 123.7-100.3 224-224 224S32 379.7 32 256 132.3 32 256 32s224 100.3 224 224m-32 0c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192">
      </path>
    </svg>
  </span>
  <div class="k-notification-content">
    Notification
  </div>
  <span class="k-notification-actions">
    <span class="k-notification-action k-notification-close-action">
      <span class="k-icon k-svg-icon k-svg-i-x">
        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96z">
          </path>
        </svg>
      </span>
    </span>
  </span>
</div>

Overview of the Notification Component | Design System Kit (telerik.com)

Also a nice looking toast Blazor Toasts Component (blazorbootstrap.com)

Notification

answered on 05 Sep 2024

1 answer

61 views

[Notification] When the page jumps, the appearance position of the Notification component is reset.

Hi,

When the page jumps, the appearance position of the Notification component is reset.

Calling code：

await AlertController.ShowSuccessNotification("[Complete Work Task]:Success");
NavigationController.Navigate(new WorkViewParam());

Controller code：

public static class AlertController
{
    private static Notification NotificationReference { get; set; }

    public static async Task ShowSuccessNotification(string message = "Success",int closeAfter = 60000,object icon = null,AnimationType animationType = AnimationType.Fade,NotificationHorizontalPosition horizontalPosition = NotificationHorizontalPosition.Center, NotificationVerticalPosition verticalPosition = NotificationVerticalPosition.Top)
    {
        if (NotificationReference != null)
        {
            NotificationReference.Animation = animationType;
            NotificationReference.HorizontalPosition = horizontalPosition;
            NotificationReference.VerticalPosition = verticalPosition;
            NotificationReference.Text = message;
            NotificationReference.CloseAfter = closeAfter;
            NotificationReference.Icon = icon;
            await NotificationReference.ShowSuccess();
        }
    }

    internal static void SetNotificationReference(Notification notificationReference)
    {
        NotificationReference = notificationReference;
    }


}

Notification Component Code(.razor)：

@using Telerik.Blazor
@using Telerik.Blazor.Components

<style>
    .custom-notification-parent {
        position: fixed;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
        z-index: 99999999;
    }

    .custom-positioned-notifications {
        position: relative;
        flex-wrap: nowrap !important;
    }

    .k-notification {
        box-shadow: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12));
        font-size: 16px;
    }
</style>

<div class="custom-notification-parent">
    <TelerikNotification @ref="@notification"
                         AnimationType="@Animation"
                         Class="custom-positioned-notifications"
                         VerticalPosition="@VerticalPosition"
                         HorizontalPosition="@HorizontalPosition">
    </TelerikNotification>
</div>

@code {

}

Notification Component Code(.razor.cs)：

publicpartialclassNotification
{
    private TelerikNotification notification { get; set; }
    public NotificationHorizontalPosition HorizontalPosition { get; set; } = NotificationHorizontalPosition.Center;
    public NotificationVerticalPosition VerticalPosition { get; set; } = NotificationVerticalPosition.Top;
    public AnimationType Animation { get; set; }
    publicstring Text { get; set; }
    publicint CloseAfter { get; set; }
    publicobject Icon { get; set; } = null;

    public async Task ShowSuccess()
    {
        notification.Show(new NotificationModel
        {
            Text = Text,
            ThemeColor = ThemeConstants.Notification.ThemeColor.Success,
            CloseAfter = CloseAfter,
            Icon = Icon
        });
    }protected override async Task OnInitializedAsync()
    {
        awaitbase.OnInitializedAsync();
        AlertController.SetNotificationReference(this);
    }
}

Notification

answered on 14 May 2024

0 answers

60 views

[Notification] When the page jumps, the appearance position of the Notification component is reset.

Hi,

When the page jumps, the appearance position of the Notification component is reset.

My project code：

public static async Task ShowSuccessNotification(string message = "Success",int closeAfter = 60000,object icon = null,AnimationType animationType = AnimationType.Fade,NotificationHorizontalPosition horizontalPosition = NotificationHorizontalPosition.Center, NotificationVerticalPosition verticalPosition = NotificationVerticalPosition.Top)
{
    if (NotificationReference != null)
    {
        NotificationReference.Animation = animationType;
        NotificationReference.HorizontalPosition = horizontalPosition;
        NotificationReference.VerticalPosition = verticalPosition;
        NotificationReference.Text = message;
        NotificationReference.CloseAfter = closeAfter;
        NotificationReference.Icon = icon;
        await NotificationReference.ShowSuccess();
    }
}

Notification Component Code(.razor)：

@using Telerik.Blazor
@using Telerik.Blazor.Components

<style>
    .custom-notification-parent {
        position: fixed;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
        z-index: 99999999;
    }

    .custom-positioned-notifications {
        position: relative;
        flex-wrap: nowrap !important;
    }

    .k-notification {
        box-shadow: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12));
        font-size: 16px;
    }
</style>

<div class="custom-notification-parent">
    <TelerikNotification @ref="@notification"
                         AnimationType="@Animation"
                         Class="custom-positioned-notifications"
                         VerticalPosition="@VerticalPosition"
                         HorizontalPosition="@HorizontalPosition">
    </TelerikNotification>
</div>

@code {

}

Notification Component Code(.razor.cs)：

public partial class Notification
    {
        private TelerikNotification notification { get; set; }
        public NotificationHorizontalPosition HorizontalPosition { get; set; } = NotificationHorizontalPosition.Center;
        public NotificationVerticalPosition VerticalPosition { get; set; } = NotificationVerticalPosition.Top;
        public AnimationType Animation { get; set; }
        public string Text { get; set; }
        public int CloseAfter { get; set; }
        public object Icon { get; set; } = null;

        public async Task ShowSuccess()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Success,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        public async Task ShowError()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        public async Task ShowWarning()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Warning,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        public async Task ShowInfo()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Info,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
            AlertController.SetNotificationReference(this);
        }
    }

Calling code：

try
{
    var response = await CoreDataSource.Request(bulkRequest);

    await AlertController.ShowSuccessNotification("[Complete Work Task]:Success");
    NavigationController.Navigate(new WorkViewParam());
}
catch (Exception e)
{
    await AlertController.ShowWarningNotification("[Complete Work Task]:" + e.Message);
}

Notification

asked on 09 May 2024

1 answer

248 views

How can I show notifications in the foreground for modal forms using the "OneNotificationPerApp" example in Github?

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

Notification

updated answer on 18 Mar 2024

1 answer

666 views

Issue with Telerik Notification Component in Blazor Server: Notifications Not Rendering Across Threads

I'm encountering an issue with the Telerik Notification component in my Blazor Server. The problem arises when I attempt to display a notification from a function that is not on the same thread as the component. In such cases, the notification item doesn't render in the UI.

To address this, I've made a modification to my component by replacing StateHasChanged with InvokeAsync(StateHasChanged) to ensure thread safety during invocation.

I'd like to seek input to determine whether this is a bug in the Telerik component or if there's a better approach to solving this issue. Any advice or suggestions would be greatly appreciated. Thank you!

USE:::

BEFORE:::

AFTER FIX::::

Notification

answered on 18 Sep 2023

1 answer

141 views

Notification overlaps Textbox

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 ?

Notification