Telerik Forums
UI for Blazor Forum
2 answers
23 views

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.

 

 

 

Rob
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 21 May 2025
1 answer
100 views

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)
Dimo
Telerik team
 answered on 05 Sep 2024
1 answer
59 views

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

Jackson
Top achievements
Rank 2
Iron
Iron
 answered on 14 May 2024
0 answers
53 views

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);
}
Jackson
Top achievements
Rank 2
Iron
Iron
 asked on 09 May 2024
1 answer
232 views

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

 

Dimo
Telerik team
 updated answer on 18 Mar 2024
1 answer
626 views

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

Nadezhda Tacheva
Telerik team
 answered on 18 Sep 2023
1 answer
137 views

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 ?

 

Georgi
Telerik team
 answered on 18 Jul 2023
0 answers
143 views

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

Tony
Top achievements
Rank 1
 asked on 11 Jul 2023
0 answers
220 views

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

 

Tony
Top achievements
Rank 1
 asked on 20 Dec 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?