New to Kendo UI for jQuery? Start a free 30-day trial

Show

methods

Displays a notification.

show

Parameters:dataObject|String|Function

Required. The string content for the notification; or the object with the values for the variables inside the notification template; or the function, which returns the required string or an object.

Important The content will not be HTML-encoded. Use the showText if you only intend to show plain text.

typeString

The notification type. Predefined type values include "base", "primary", "secondary", "tertiary", "info", "success", "warning", "error" and "inverse". Custom types should match the types from the template configuration. If this argument is not supplied, then "base" is assumed.

safeBoolean

Controls the HTML encoding. When the value is true the content is HTML-encoded (safe from XSS attacks). The false or undefined (omitted) refers to the content NOT being encoded.

<span id="notification"></span>
<script>
var notificationWidget = $("#notification").kendoNotification().data("kendoNotification");

notificationWidget.show("foo text", "warning");
</script>

<span id="notification"></span>
<script>
function getNotificationMessage() {
    return {
        myMessage: "foo text"
    }
}

var notificationWidget = $("#notification").kendoNotification({
	templates: [{
		type: "myAlert",
		template: "<div>System alert: #= myMessage #</div>"
	}]
}).data("kendoNotification");

notificationWidget.show(getNotificationMessage, "myAlert");
</script>

<span id="notification"></span>
<script>

$("#notification").kendoNotification();

var notification = $("#notification").kendoNotification().data("kendoNotification");

// Unsafe - renders HTML (XSS risk if content is from user input)
notification.show("<strong>Bold text</strong>", "warning", false);
// or
notification.show("<strong>Bold text</strong>", "warning");

// Safe - HTML-encodes, shows literal text
notification.show("<strong>Bold text</strong>", "info", true);
// Would display: <strong>Bold text</strong> (as plain text)

// Public API - showText() method internally uses safe=true
notification.showText("<strong>Bold text</strong>", "info");
// Same as: notification.show("<strong>Bold text</strong>", "info", true);
</script>

<span id="notification"></span>
<script>

$("#notification").kendoNotification();

var notification = $("#notification").kendoNotification().data("kendoNotification");

notification.show("Message", "primary");   // Primary notification
notification.show("Message", "info");      // Blue info notification
notification.show("Message", "success");   // Green success notification
notification.show("Message", "warning");   // Yellow warning notification
notification.show("Message", "inverse");   // Inverse notification
notification.show("Message");               // No type = defaults to "base"
</script>