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.
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>
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 {
}
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);
}
}
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 {
}
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); }
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
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::::
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