Kendo UI Notification can be initialized from any element, because it does not manipulate the element's content.

The element will be hidden if the widget is used with popup notifications, or if static notifications are not appended to the Notification element. In these two cases it is assumed that the element will not be needed. However, if the Notification element is meant to contain static (non-popup) notifications, then its tag is recommended to be such so as to allow nesting the elements inside the notifications' template. For example, inline elements, such as <span>, <a>, <em>, etc. cannot contain block elements, such as <div>, <p>, <ul>, <li>, headings, etc. It is perfectly fine to use a <div> element for initiating the widget.

The example below demonstrates how to initialize the Notification and what its basic usage is.

Kendo UI Notification provides the following built-in notification types: "info", "success", "warning" and "error". By using them, you can apply different templates and looks for each type. The built-in types provide ready-to-use shorthand display methods and styling functionalities. The shorthand method names match the listed notification types. If you do not specify a notification type, the widget assumes that the default "info" should be invoked and will display it. You can also defines an unlimited amount of custom notification types and corresponding templates.

By default, Kendo UI Notifications remain visible for 5 seconds and then disappear. Clicking anywhere on a notification hides it right away. You can delay hiding, which is an option configurable in milliseconds. If you set a zero value, the automatic hiding is disabled. After its hiding animation is completed, the dismissed notification is removed from the DOM.

If you want to make the notification more intuitive for the end user, the widget allows for displaying a visible Close button.

The default behavior of hiding a notification by clicking anywhere on it can be disabled. In this case, the notification can be dismissed only by clicking the Close button, if present.

The option of hiding a notification manually can also be postponed, which is useful if you want to prevent users from accidentally hiding a notification, which has just appeared. Note that by default the option to postpone the hiding of a notification is disabled.

The example below demonstrates how to manage the hiding settings of a notification.

Popup messages

By default, Kendo UI Notification creates popups, which overlay the other page content. If you do not define any position settings, the first popup will be displayed near the bottom-right corner of the browser viewport and subsequent popups will stack upwards.

You can independently control positioning and stacking. If you do not define any stacking settings, the popups will stack upwards or downwards, depending on the positioning settings. For example, popups displayed at the top of the viewport will stack downwards and vice versa. The automatic settings of the stacking functionality comply with a common preference among users. However, you can render leftward or rightward stacking by explicitly defining the respective settings.

Popups are pinned by default, which means that they do not change their position when users scroll the page. The pinned functionality is achieved by applying a position:fixed style to the popups. If you want to let the popups move together with the scrolled page, use the position:absolute style.

If the popup content is expected to vary and stacking is likely to occur, it is a good idea to define explicit dimensions. In this way, the popups are aligned and look better when stacked next to one another.

The example below demonstrates how to manage the positioning, stacking, and sizing functionalities of notifications.

There may be cases when the popup notifications appear too quickly or occupy too much space on the screen, so that there is not enough room on the screen. In such cases the subsequent popups will appear outside of the visible viewport area and will be inaccessible (if pinned). If such scenarios are likely to occur, it is recommended to consider using shorter hide delay or static notifications (see below), for better usability.

Stacking works with the help of a Globally Unique Identifier (GUID), which is generated by the widget upon initialization and appended as a CSS class to each notification element. In this way every Notification instance can recognize and manage its own currently visible notifications independently.

When a popup notification message from a given stack is hidden, the remaining visible popups do not move. If automatic moving and repositioning is desired, it can be achieved, as shown in the Move Visible Notifications after Hiding Others how-to article.

Important

The usage of more than one Notification widget instances, which display notifications at the same place on the page, is not recommended because the notifications from the multiple instances will overlap.

Static messages

Kendo UI Notification also allows for displaying static notifications, which do not overlay other elements, but instead take part in the so-called normal flow of the page content. In such cases, the positioning settings are ignored as they do not make sense. When you use static notifications, the stacking direction can only be set to down, which is the default setting, or up, depending on whether new messages should appear after or before the existing ones. Static notifications are displayed if a target container is specified. One widget instance can display either popup, or static notifications, but not both of them at one time.

It is possible for a single Notification widget instance to display different messages with different settings, e.g. messages related to automatic hiding, hide timeouts, etc. To apply the desired configuration options, use the setOptions method. The new options will apply to all messages displayed later on. To restore or change the widget settings again, use setOptions as many times as necessary.

The content of this section is intended to users that are familiar with Kendo UI templates.

Kendo UI Notification allows configuring multiple templates. Each template will be used together with its corresponding notification type, either build-in, or custom. If you define a custom template for a built-in notification type, you will no longer be able to use the corresponding built-in template, but you will still be able to use the shorthand show methods, as demonstrated in the example below.

Proper right-to-left support for the popup notifications, when using the built-in notification templates, requires the originating element of the Notification widget to be a descendant of an element with a k-rtl class. Static notifications using built-in templates should also be descendants of such a .k-rtl element.

Was this article helpful?

/

Give article feedback

Tell us how we can improve this article

Code samples are inaccurate / outdated.
I expected to find other / more information.
There are typos / broken links / broken page elements.
Content is inaccurate / outdated.
Other
By checking this box you consent to Progress contacting you by email about your response on this page.

Frameworks

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.