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

Apply different autohide for notification types

3 Answers 92 Views
Notification
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 05 Feb 2020, 09:58 AM

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

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 07 Feb 2020, 08:42 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 10 Feb 2020, 12:41 PM

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

0
Accepted
Ivan Danchev
Telerik team
answered on 12 Feb 2020, 10:34 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Notification
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Ivan Danchev
Telerik team
Grant
Top achievements
Rank 2
Veteran
Iron
Share this question
or