Notification click event with custom data

1 Answer 17 Views
Notification
Chris
Top achievements
Rank 1
Chris asked on 15 Nov 2021, 08:34 PM

I'm utilizing the notification and trying to implement a click event similar to this example:

https://docs.telerik.com/blazor-ui/components/notification/templates#get-a-click-event-for-notification-body

My problem is that I need to get a custom field to my click event (i.e. the ID of a database record) that will be different for each notification. Is there anyway to pass custom data to the notification other than what is in the NotificationModel?

Chris
Top achievements
Rank 1
commented on 16 Nov 2021, 04:23 PM

To get around this, I ended up serializing an object into the NotificationModel.Text field and then deserializing it in the Notification template. It works, but it would be nice if there was a better way to do this.

1 Answer, 1 is accepted

Sort by
1
Accepted
Dimo
Telerik team
answered on 18 Nov 2021, 11:51 AM

Hi Chris,

There is a better way that does not require (de)serialization.

  1. Implement a class that inherits from NotificationModel. For example, MyExtendedNotificationModel.
  2. Add the required properties to the new class.
  3. Pass a MyExtendedNotificationModel instance to the Notification Show method. This will allow you to set the custom properties.
  4. In the Notification <Template>, cast the context to MyExtendedNotificationModel. This will allow you to access and consume the additional data.
  5. If you use both overloads of Show(), make sure to check if the cast is successful, otherwise you may get a NullReferenceException.

<TelerikNotification @ref="@NotificationReference" VerticalPosition="NotificationVerticalPosition.Top">
    <Template>
        @{
            var myContext = context as MyExtendedNotificationModel;

            // This check is needed only if using both overloads of the Show() method.
            if (myContext != null)
            {
                <span>@myContext.CustomID :</span>
                <a style="color:inherit;" target="_blank"
                    href="@( $"{myContext.CustomUrl}{myContext.CustomID}" )">
                    @myContext.Text
                </a>
            }
            else
            {
                <span>@context.Text</span>
            }
        }

    </Template>
</TelerikNotification>

@code {
    TelerikNotification NotificationReference { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            ShowNotifications();
        }
    }

    void ShowNotifications()
    {
        // will use the default NotificationModel
        NotificationReference.Show("plain notication", "tertiary");

        NotificationReference.Show(new MyExtendedNotificationModel()
        {
            Text = "Completed tasks",
            ThemeColor = "secondary",
            CustomID = 2,
            CustomUrl = "https://feedback.telerik.com/blazor?listMode=Popular&statusId=",
            CloseAfter = 0
        });

        NotificationReference.Show(new MyExtendedNotificationModel()
        {
            Text = "Tasks in development",
            ThemeColor = "primary",
            CustomID = 6,
            CustomUrl = "https://feedback.telerik.com/blazor?listMode=Popular&statusId=",
            CloseAfter = 0
        });
    }

    public class MyExtendedNotificationModel : NotificationModel
    {
        public int CustomID { get; set; }
        public string CustomUrl { get; set; }
    }
}

Regards,
Dimo
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/.

Chris
Top achievements
Rank 1
commented on 18 Nov 2021, 07:07 PM

Awesome. Thank you very much for the example. Exactly what I needed.
Tags
Notification
Asked by
Chris
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or