ASP.NET Core Notification Overview

The Notification is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

The Telerik UI Notification TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Notification widget.

The Notification provides a styled UI widget with arbitrary content which can provide information to the user on various occasions.

• Demo page for the Notification HtmlHelper

• Demo page for the Notification TagHelper

Initializing the Notification

You can initialize the Notification from any element because it does not manipulate its content. The element will be hidden if the widget uses popup notifications or if the static notifications are not appended to the Notification element. In such cases, the element is not needed.

If the Notification element contains static (non-popup) notifications, enable its tag to allow nesting the elements inside the template of the notifications. For example, inline elements, such as span, a, or em cannot contain block elements such as div, p, ul, li, or headings. However, you can use a div element.

The following example demonstrates how to define the Notification.

   @(Html.Kendo().Notification()
        .Name("notification")
    )

    <script type="text/javascript">
        $(document).ready(function () {
            var popupNotification = $("#notification").data("kendoNotification");

            popupNotification.show("Test popup message", "info");                        
        });
    </script>

    <kendo-notification name="notification" auto-hide-after="0"></kendo-notification>

Basic Configuration

The following example demonstrates the basic configuration of the Notification.

    @(Html.Kendo().Notification()
        .Name("notification")
        .Position(p => p.Pinned(true).Top(30).Right(30))
        .Stacking(NotificationStackingSettings.Down)
        .AutoHideAfter(0)
        .Templates(t =>
        {
            t.Add().Type("info").ClientTemplateID("emailTemplate");
            t.Add().Type("error").ClientTemplateID("errorTemplate");
            t.Add().Type("upload-success").ClientTemplateID("successTemplate");
        })
        .Animation(a => a.Open(e => e.Duration(500)).Close(e => e.Duration(0)))
    )

    <kendo-notification name="notification"
                        stacking="NotificationStackingSettings.Down"
                        auto-hide-after="0">
        <position pinned="true" top="30" right="30" />
        <templates>
            <notification-template type="info" template-id="emailTemplate" />
            <notification-template type="error" template-id="errorTemplate" />
            <notification-template type="upload-success" template-id="successTemplate" />
        </templates>
        <popup-animation>
            <open duration="500" />
            <close duration="0" />
        </popup-animation>
    </kendo-notification>

Functionality and Features

• Positioning—You can predefine the position of the Notification.
• Types—The Notification provides built-in "info", "success", "warning", and "error" types.
• Hiding Options—You can select different hiding behavior for the Notification.

Next Steps

• Getting Started with the Notification

• Basic Usage of the Notification HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the Notification TagHelper for ASP.NET Core (Demo)

• Notification in Razor Pages

See Also

• Using the API of the Notification HtmlHelper for ASP.NET Core (Demo)
• Server-Side API