Notification Templates AutoHideAfter

[Joe]

Hi,
I'm basing my notifications on this demo: http://demos.telerik.com/aspnet-mvc/notification/templates
My templates are success, info, error, and warning.

@(Html.Kendo().Notification()
        .Name("notification")
        .Position(p => p.Pinned(true).Top(30).Right(30))
        .Stacking(NotificationStackingSettings.Down)
        .AutoHideAfter(0)
        .Templates(t =>
        {
            t.Add().Type("info").ClientTemplateID("infoTemplate");
            t.Add().Type("success").ClientTemplateID("successTemplate");
            t.Add().Type("error").ClientTemplateID("errorTemplate");
            t.Add().Type("warning").ClientTemplateID("warningTemplate");
        })
    )

Then I show them like this in JS...

notification.show({
    message: "Upload Successful",
}, "success");

I can set AutoHideAfter when I declare the notification, however I was wondering if it's possible to set AutoHideAfter for an individual template? 
That way I can disable autohide for all templates except the success template. 

Thanks for any help,
Joe

[Dimo]

Hi Joe,

There is a single AutoHideAfter setting for all Notification templates, but you can change the property value on the fly before and after showing a particular template type, in order to achieve the desired behavior.

http://docs.telerik.com/kendo-ui/api/framework/widget#methods-setOptions

Regards,
Dimo
Telerik

 

 

[Joe]

Hi Dimo,
This is promising and I think I'm close, but I can't get the setOptions to work. 

Create the notification...

@(Html.Kendo().Notification()
    .Name("notification")
    .Position(p => p.Pinned(true).Top(30).Right(30))
    .Stacking(NotificationStackingSettings.Down)
    .AutoHideAfter(0)
    .Templates(t =>
    {
        t.Add().Type("info").ClientTemplateID("infoTemplate");
        t.Add().Type("success").ClientTemplateID("successTemplate");
        t.Add().Type("error").ClientTemplateID("errorTemplate");
        t.Add().Type("warning").ClientTemplateID("warningTemplate");
    })
)

Show the notification in JS with my failed attempt to setOptions...

var notification = $("#notification").data("kendoNotification");
notification.setOptions({ AutoHideAfter: 1000 });
notification.show({
    message: "Upload Successful",
}, "success");

Where do I use the setOptions method?

Thanks,
Joe

[Dimo]

Hello Joe,

The setOptions method expects property names as they are used in client-side configuration syntax. Currently the letter casing of "AutoHideAfter" is incorrect:

http://docs.telerik.com/kendo-ui/api/web/notification#configuration-autoHideAfter

Regards,
Dimo
Telerik

 

 

[Joe]

Thanks Dimo. I was so close!

Here is my final JS which disables auto hide unless the "type" is success...

var notification = $("#notification").data("kendoNotification");
var notificationtype = 'success';
var delay = (notificationtype == 'success') ? 5000 : 0; // if type is 'success' set 5 second delay
notification.setOptions({ autoHideAfter: delay });
notification.show({
    title: 'Title Text',
    message: 'Message Text'
}, notificationtype);