templatesArray(default: [])
Describes the HTML markup of the different notification types as Kendo UI template strings. The predefined type values are "base", "primary", "secondary", "tertiary", "info", "success", "warning", "error" and "inverse".
This documentation section assumes that you are familiar with Kendo UI templates.
Example - define several custom templates
<span id="notification"></span>
<script id="myAlertTemplate" type="text/x-kendo-template">
<div class="myAlert">System alert generated at #= time # : #= myMessage #</div>
</script>
<script>
$(function(){
var notificationElement = $("#notification");
notificationElement.kendoNotification({
templates: [{
// define a custom template for the built-in "warning" notification type
type: "warning",
template: "<div class='myWarning'>Warning: #= myMessage #</div>"
}, {
// define a template for the custom "timeAlert" notification type
type: "timeAlert",
template: "<div class='myAlert'>System alert generated at #= time # : #= myMessage #</div>"
// template content can also be defined separately
//template: $("#myAlertTemplate").html()
}]
});
var n = notificationElement.data("kendoNotification");
// show a warning message using the built-in shorthand method
n.warning({
myMessage: "some warning message here"
});
// show a "timeAlert" message using the default show() method
n.show({
time: new Date().toLocaleTimeString(),
myMessage: "Server will be restarted."
}, "timeAlert");
});
</script>templates.typeString(default: "")
Required. Specified a unique identifier, which is used to retrieve the correct template when a notification of this type is shown.
Example
<div id="notification"></div>
<script>
$("#notification").kendoNotification({
templates: [{
type: "info",
template: (data) => `<div class='info-notification'>${data.content}</div>`
}, {
type: "warning",
template: (data) => `<div class='warning-notification'>${data.content}</div>`
}]
});
// Show notification with specific type
$("#notification").getKendoNotification().show("This is an info message", "info");
</script>See the example above.
templates.templateString(default: "")
Defines a Kendo UI template to be used with the corresponding notification type.
Example
<div id="notification"></div>
<script>
$("#notification").kendoNotification({
templates: [{
type: "custom",
template: (data) => `<div class='custom-template'>
<strong>${data.title || 'Notification'}</strong>
<p>${data.message}</p>
<button onclick='$(this).closest(\".k-notification\").find(\".k-notification-wrap\").click()'>Close</button>
</div>`
}]
});
// Show notification with custom template
$("#notification").getKendoNotification().show({
title: "Custom Title",
message: "This notification uses a custom template"
}, "custom");
</script>See the example above.