blazor-docs/knowledge-base/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]({%slug notification-open-close-hide%}). This will allow you to set the custom properties.
4. In the [Notification <Template>]({%slug notification-templates%}), cast the context to MyExtendedNotificationModel. This will allow you to access and consume the additional data.
5. If you use [both overloads of Show()]({%slug notification-open-close-hide%}#open), 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; }
    }
}