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

Templates

configuration

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.

templates

Array

Default: []

<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.template

String

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

Default: ""

<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.

templates.type

String

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

Default: ""

<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.