Notifications not stacking

[Valentin]

Hi team,

I'm trying to setup notifications on my project, using your demo : https://demos.telerik.com/kendo-ui/notification/templates. I managed to make notifications appears like in your tutorial, but they are not stacking when multiple of them are open in the same time. 

Here's my code : 

function showNotification(_title, _txt, _type) {
    var notification = $("#notificationPopup").kendoNotification({
        position: {
            pinned: true,
            top: 30,
            right: 30
        },
        autoHideAfter: 0,
        stacking: "down",
        templates: [{
            type: "success",
            template: $("#successTemplate").html()
        }, {
            type: "warning",
            template: $("#warningTemplate").html()
        }, {
            type: "error",
            template: $("#errorTemplate").html()
        }]
    }).data("kendoNotification");

    notification.show({
        title: _title,
        message: _txt
    }, _type);
}

 

<span id="notificationPopup" style="display:none;"></span>

<script id="successTemplate" type="text/x-kendo-template">
    <div class="notifSuccess">
        <h3>#= title #</h3>
        <p>#= message #</p>
    </div>
</script>

<script id="warningTemplate" type="text/x-kendo-template">
    <div class="notifWarning">
        <h3>#= title #</h3>
        <p>#= message #</p>
    </div>
</script>

<script id="errorTemplate" type="text/x-kendo-template">
    <div class="notifError">
        <h3>#= title #</h3>
        <p>#= message #</p>
    </div>
</script>

 

I call showNotification() whenever I want one to appear, but they do one in front each other instead of stacking in the direction I indicated.

 

Any idea of what I missed ?

 

Best regards,

 

Valentin

 

[Valentin]

I found out what I was doing wrong. With this method, I am creating a new notification every time I call showNotification, and I shouldn't do that. I moved everything but my notification.show() inside a document.ready, so my kendo notification is only initialized once, and it works.