ASP.NET MVC Notification Overview
The Notification is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper 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>
Basic Configuration
The following example demonstrates the basic configuration of the Notification.
@(Html.Kendo().Notification()
.Name("notification")
.Stacking(NotificationStackingSettings.Down)
.Width("12em")
.Height(200)
.HideOnClick(false)
.Events(ev => ev.Show("onShow").Hide("onHide"))
.Templates(t =>
{
t.Add().Type("time").ClientTemplate("<div style='padding: .6em 1em'>Time is: #: time #</div>");
})
.Button(true)
)
<script type="text/javascript">
$(function () {
// The Name() of the Notification is used to get its client-side instance.
var notification = $("#notification").data("kendoNotification");
console.log(notification);
});
</script>
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.