Notification Templates AutoHideAfter

5 posts, 1 answers
  1. Joe Hakooz
    Joe Hakooz avatar
    65 posts
    Member since:
    Dec 2007

    Posted 05 Aug 2014 Link to this post

    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

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Aug 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Joe Hakooz
    Joe Hakooz avatar
    65 posts
    Member since:
    Dec 2007

    Posted 06 Aug 2014 in reply to Dimo Link to this post

    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
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Aug 2014 Link to this post

    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.

     
  6. Joe Hakooz
    Joe Hakooz avatar
    65 posts
    Member since:
    Dec 2007

    Posted 06 Aug 2014 in reply to Dimo Link to this post

    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);
Back to Top
UI for ASP.NET MVC is VS 2017 Ready