I have utilized the Notification component in a centralized portion of my mainlayout and created a service so that all notifications flow through control so I don't have to repeat a TelerikNotification component on every content page. It is working great except.. there is no API control over the notifications once they are created.
What I would like to do is have all the open notifications cleared in response to a location change event on the NavigationManager. I can accomplish the event but cant clear the notifications.
Thx
---
ADMIN EDIT
Here is a workaround - hide the notification component so it disposes and hides all notification popups, then show it again so you can keep using it:
<TelerikButton OnClick="@AddNotifications">Add success, info, warning, error notification</TelerikButton>
<TelerikButton OnClick="@HideAllNotifications">Hide all notifications</TelerikButton>
@if (isNotificationRendered)
{
<TelerikNotification @ref="@NotificationReference" Class="MyTelerikNotification"></TelerikNotification>
}
@code {
//hide all implementation
bool isNotificationRendered { get; set; } = true;
async Task HideAllNotifications()
{
isNotificationRendered = false;
await InvokeAsync(StateHasChanged);
await Task.Delay(20);
isNotificationRendered = true;
}
//end
public TelerikNotification NotificationReference { get; set; }
public void AddNotifications()
{
// Success
NotificationReference.Show(new NotificationModel()
{
ThemeColor = ThemeColors.Success,
Text = "Success",
});
// Info
NotificationReference.Show(new NotificationModel()
{
ThemeColor = ThemeColors.Info,
Text = "Info",
});
// Warning
NotificationReference.Show(new NotificationModel()
{
ThemeColor = ThemeColors.Warning,
Text = "Warning",
});
// Error
NotificationReference.Show(new NotificationModel()
{
ThemeColor = ThemeColors.Error,
Text = "Error",
});
}
}
<style>
.MyTelerikNotification .k-notification-container .k-notification-wrap {
width: 300px;
height: 50px;
font-size: 1.5em;
text-align: center;
align-items: center;
}
</style>
---
Guys,
If you're going to enable using external icon/font libraries seamlessly across all Telerik components, every component that has a Icon parameter needs to implement an IconClass parameter too. Another case-in-point is the TelerikNotification NotificationModel model class. It has an Icon parameter, but no IconClass parameter.
Is there a way to apply an IconClass parameter for the Font Awesome library to the TelerikNotification component in a dynamic manner (i.e., a method that does not hard code the icon class in css, but instead takes any value for IconClass)?
I would like to show a maximum number of notifications.
For instance, if I have a maximum of two notifications and I am currently showing two on screen and a third needs to be shown, the first notification is dismissed and the new notification is shown.
===================
ADMIN EDIT
Once implemented, the Close/Hide method of the Notification can also be used to achieve the described setup.
===================