This is a migrated thread and some comments may be shown as answers.

Notification Templates AutoHideAfter

4 Answers 147 Views
Notification
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 2
Joe asked on 05 Aug 2014, 11:18 PM
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

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 06 Aug 2014, 10:34 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Joe
Top achievements
Rank 2
answered on 06 Aug 2014, 01:33 PM
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
0
Accepted
Dimo
Telerik team
answered on 06 Aug 2014, 02:21 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Joe
Top achievements
Rank 2
answered on 06 Aug 2014, 02:55 PM
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);
Tags
Notification
Asked by
Joe
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Joe
Top achievements
Rank 2
Share this question
or