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

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

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