Apply different autohide for notification types

[Grant]

Hi, 

How can i apply different autoHide duration for different types of notifications? A success message should auto hide after 5sec, but the rest must not autohide.

I looked at this thread, https://www.telerik.com/forums/different-closing-behaviour-for-notifications , but it does work completely. When the info window hides, it hides everything, not just the info window.

Please Advise,

Grant

[Ivan Danchev]

Hello Grant,

In the example from the linked forum thread the different types of notification shown use a single Notification instance. To avoid that consider initializing separate Notification instances. This would allow you to specify the autoHide time for each type. Here's an example: https://dojo.telerik.com/iVEdaDiK/2

Regards,
Ivan Danchev
Progress Telerik

[Grant]

Hi Ivan, 

Thanks for the help, I guess i was hoping to be able to do it all in one.

Moving on, I've created multiple instances, one to handle success, info & warning, and another to handle error. Please could you take a look, https://dojo.telerik.com/USIhogiJ. I've set the error to only close on button click, but the button isnt showing (here or my environment) so theres no way to close it.

Please advise.

Thanks, 
Grant

PS. Ignore anything related to the icon or 'fa'. this is my icon library stuff

[Matthew]

Hi Grant! I saw your example and it has a feature that I can't seem to get to work on my application. How were you able to get the remaining notifications to move up so that the list stays stacked? The default behavior seems to leave each notification in the same position as it was originally rendered. I took a look at your Dojo but still can't get mine to collapse like that. Any help you can provide would be greatly appreciated.

[Matthew]

Nevermind-- sorry. I missed the # in front of the ID on the appendTo.

[Ivan Danchev]

Hi Grant,

When a template is used it changes the Notification rendering, so a couple of additional Html elements need to be included in the template:

<script id="planner-notification-template" type="text/x-kendo-template">
	<div class="k-notification-wrap">
    <div class="k-notification-content">
       <div class="planner-notification">
        <span class="fa #:icon# fa-2x fa-fw"></span>
        <span class="msg">#=message#</span>
  			</div>
  	</div>
    <span class="k-icon k-i-close" title="Hide"></span>
  </div>
</script>

Here's the modified dojo example: https://dojo.telerik.com/USIhogiJ/7

Regards,
Ivan Danchev
Progress Telerik