How to pass autoHideAfter in kendo Notification

Question

I'm creating generalize notification in my application. In that i have to pass time for display kendo notification with different time interval.

<div id="appendNotification" class="k-animation-container k-state-border-down" style="margin: 0px; padding: 0px 0px 4px; overflow: visible; position: fixed; top: 5%; z-index: 10002; right: 2%;"></div>
<span id="popupNotification"></span>

& My kendo notification code is as under

var notificationElement = $("#popupNotification");
        window.notificationElement.kendoNotification({
            appendTo: "#appendNotification",
            autoHideAfter: 5000,
            templates: [{
                    type: "success",
                    template: GetNotificationTemplate("#= notificationHeader #","#= notificationMessage #")
                },
                {
                    type: "warning",
                    template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                },
                {
                    type: "info",
                    template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                },
                {
                    type: "error",
                    template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                }]
        });
        var nspSendCommonNotification = window.notificationElement.data("kendoNotification");
        var container = $(nspSendCommonNotification.options.appendTo);
        container.scrollTop(container[0].scrollHeight);


function GetNotificationTemplate(headerTextValue, contentTextValue) {
            return "<div style=\"padding:5px\"><span class='k-icon k-i-close nspNotificationClose nspNotificationCross' style=\"float: right;\"></span><h3>" + headerTextValue + "</h3><p style='margin:0px;width: 250px;'>" + contentTextValue + "</p></div>";
        }

so i need to pass autoHideAfter dynamically is it possible

you can find the problem at : http://jsfiddle.net/Ks8nF/

Answer 1

You can try something like this:

put data attribute for time interval and append to values in your targeting span (in this case target span is popupNotification)

<div id="appendNotification" class="k-animation-container k-state-border-down" style="margin: 0px; padding: 0px 0px 4px; overflow: visible; position: fixed; top: 5%; z-index: 10002; right: 2%;"></div>
<span id="popupNotification" data-time="3000" data-appendto="appendNotification"></span>

And modify your jquery :

    var notificationElement = $("#popupNotification");
            window.notificationElement.kendoNotification({
                appendTo: $(this).data('appendto'),// read append to data
                autoHideAfter: $(this).data('time'),// read time interval data
                templates: [{
                        type: "success",
                        template: GetNotificationTemplate("#= notificationHeader #","#= notificationMessage #")
                    },
                    {
                        type: "warning",
                        template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                    },
                    {
                        type: "info",
                        template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                    },
                    {
                        type: "error",
                        template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                    }]
            });
            var nspSendCommonNotification = window.notificationElement.data("kendoNotification");
            var container = $(nspSendCommonNotification.options.appendTo);
            container.scrollTop(container[0].scrollHeight);


    function GetNotificationTemplate(headerTextValue, contentTextValue) {
                return "<div style=\"padding:5px\"><span class='k-icon k-i-close nspNotificationClose nspNotificationCross' style=\"float: right;\"></span><h3>" + headerTextValue + "</h3><p style='margin:0px;width: 250px;'>" + contentTextValue + "</p></div>";
}

Try similar logic to configure Kendo Notification dynamically.