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.
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.
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.