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

Stack Static Notifications to the Left or Right


Product Progress® Kendo UI® Notification for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I stack static notifications to the left or to the right in the Kendo UI Notfication?


The following example demonstrates how to achieve the desired scenario.

        min-height: 2.6em;
        padding: .3em .6em;
        overflow: auto;

        text-align: right;

      .notification-container .k-notification
        padding: .3em .6em;


    <script id="my-template" type="text/x-kendo-template">
    <div class="my-container">
      #= message #

    <p><button id="buttonRight">Stack to the right</button></p>
    <div id="ntfRight" class="k-block notification-container"></div>

    <p><button id="buttonLeft">Stack to the left</button></p>
    <div id="ntfLeft" class="k-block notification-container"></div>

      $(function() {
        var options = {
          stacking: "down",
          autoHideAfter: 0,
          templates: [{
            type: "my-type",
            template: $("#my-template").html()
          show: function(e) {
            e.element.css("display", "inline-block");
        var ntfRight = $("#ntfRight").kendoNotification($.extend(options, {stacking: "down", appendTo: "#ntfRight"})).data("kendoNotification");
        var ntfLeft = $("#ntfLeft").kendoNotification($.extend(options, {stacking: "up", appendTo: "#ntfLeft"})).data("kendoNotification");


        function stackLeftRight(e) {
          var notificationWidget = $(e.sender.element).is("#buttonLeft") ? ntfLeft : ntfRight;
          var d = new Date();
            message: kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000")
          }, "my-type");

          var container = $(notificationWidget.options.appendTo);

See Also

In this article