notification-custom-model-data.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Pass Custom Fields and Data to the Notification	How to extend the NotificationModel and pass custom fields with dynamic data to each notification popup.	how-to	Pass Custom Fields and Data to the Notification	notification-custom-model-data		notification, custom, model, data	1543051	kb

Environment

Product

Notification for Blazor

Description

I need to get a custom field with different value to each notification (i.e. the ID of a database record). How to pass custom data and use it in the notification popup template?

Solution

1. Implement a class that inherits from Telerik.Blazor.Components.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">
    <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()
    {
        NotificationReference.Show(new MyExtendedNotificationModel()
        {
            Text = "Tasks in development",
            ThemeColor = "primary",
            CustomID = 6,
            CustomUrl = "https://feedback.telerik.com/blazor?listMode=Popular&statusId=",
            CloseAfter = 0
        });

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

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

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