templates Array (default: [])

Describes the HTML markup of the different notification types as Kendo UI template strings. The built-in types are "info", "success", "warning" and "error".

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.type String (default: "")

Required. Specified a unique identifier, which is used to retrieve the correct template when a notification of this type is shown.

See the example above.

templates.template String (default: "")

Defines a Kendo UI template to be used with the corresponding notification type.

See the example above.

In this article