Unplanned
Last Updated: 01 May 2021 05:30 by Douglas
Douglas
Created on: 23 Jan 2021 20:09
Category: Notification
Type: Feature Request
3
TelerikNotification Clear All Method

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>

---

3 comments
Douglas
Posted on: 01 May 2021 05:30

Thank you for work around.  I have it working nicely when people navigate away from views that have open notifications.

Regards

Doug

 

ADMIN
Marin Bratanov
Posted on: 28 Apr 2021 06:32

Hello all,

I've just added a workaround in the opener post.

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Nadezhda Tacheva
Posted on: 25 Jan 2021 15:45

Hello Douglas,

I also consider Clear All Method a very useful feature to add to the Notification component.

I have added a vote on your behalf to keep proper track of the votes for this request. You can also click on the  follow button in the public feedback portal post to receive email notifications on future status changes (this is the best way to know when a feature gets implemented since we announce such information in the portal).

In the meantime, we also have an opened feature request for method for closing/hiding the notification. In case that is something you find interesting you may also vote for and follow it to keep track with its progress.

Regards,
Nadezhda
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.