Show just one notification at once

[Fernando]

Hi,
I want to show just one notification at once, if two notifications have to be showed, I hide the first one. To achieve it I hide the first one with the method hide() and it works, but then I was debugging my work and I saw the next problem:

When a new notification is showed, kendo creates the next div element as the last child of body:

<div class="k-animation-container _4215aa70-5cf9-4c47-97b9-fcdda2a56216" style="width:415px; height: 31px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; overflow: visible; display: block; position: fixed; top: 321px; z-index: 10002; left: 475px;">
<div class="k-widget k-notification k-notification-error k-popup k-group k-reset k-state-border-up" data-role="alert" style="display:none; font-size: 10.6667px; fontfamily: tahoma; font-stretch: normal; font-style: normal; font-weight: 400; line-height: 14px; position: absolute; opacity: 1;">
<div class="k-notification-wrap">
<span class="k-icon k-i-note">error</span>
Notification text
<span class="k-icon k-i-close">Hide</span></div></div></div>


also add a class () to the body. When the notification fades out, both the div and the class dissapear. When a new notification is showed when the previous one is still on screen, the first one dissapear and the second one shows up as I want, but the first div element don't dissapear and last still when the last one dissapear.

I want to remove properly all the divs for animations when the last notification fades out.

Thanks.

[Dimo]

Hello Juan Jose,

I am afraid I didn't understand the part of your post marked in red:

>> "When a new notification is showed when the previous one is still on screen, the first one dissapear and the second one shows up as I want, but the first div element don't dissapear and last still when the last one dissapear."

Generally, notifications use animations to show and hide. This means that if you hide the existing notification and show the new one immediately afterwards, there will be time when two animating notifications are visible on the screen. If you want to avoid this, you will need to remove the existing notification from the DOM.

http://docs.telerik.com/kendo-ui/api/javascript/ui/notification#methods-getNotifications

var notificationWidget = $("#notification").data("kendoNotification");

notificationWidget.getNotifications().parent().remove();

notificationWidget.show("foo");

Let me know if I am missing something.


Regards,
Dimo
Telerik

 

 

[Fernando]

Hello Dimo,

Probably I'm not explaining well... I want to show just one notification at once, for this I hide the last notification showed when onShow is called.

onShow = function(e)
{
if (singleFlag) {
if (prevNotification != null) {
         prevNotification.hide();
}
prevNotification = e.element;
}

...

}

With te previous code I can show just one notification, but kendo creates a div element for the animation (a div for each notification). And when I hide a notification his div element remain in the HTML code. You can see it with an HTML debugger on the body element of the web page.

On the image you can see the div in yellow (last of body childs) which is the animation of the current notification and two divs above that shouldn't be there because their notifications aren't there.

[Fernando]

P.S.: I tried removing the notification, but doing that more notifications are not displayed

[Dimo]

Hi Juan Jose,

If you inspect our demos, you will see that the animation containers are removed from the DOM after the notification's closing animation is complete.

http://demos.telerik.com/kendo-ui/notification/api
(notifications close automatically or via the button)

http://demos.telerik.com/kendo-ui/notification/templates
(notifications close when clicked)

In order to find out what is the problem in your case, I will need a runnable example.

Regards,
Dimo
Telerik

 

 

[Fernando]

Hi Dimo,

I solved the problem. I was using the following code:

When I wanted to show the notification:
$('#popupNotification').kendoNotification().data('kendoNotification').show(message, type);

In the onShow:

if (prevNotification != null) {
         prevNotification.hide();
}
prevNotification = e.element;


According to the links that you share to me, I realized that i have to save the notification widget in a variable to call his hide method:

When I wanted to show the notification:
prevNotification = $('#popupNotification').kendoNotification(IsKendoNotification.notificationConf).data('kendoNotification').show(message, type);

In the onShow:

if (prevNotification != null) {
         prevNotification.hide();
}

Thanks for the help.

[Dimo]

Hello Juan Jose,

Please be careful to avoid duplicate widget initialization:

http://docs.telerik.com/kendo-ui/basics/jquery-initialization#duplicate-kendo-ui-widget-initialization

Regards,
Dimo
Telerik

 

 

[Fernando]

Hi Dimo,

I want to create a js file which i can include in any other file and just call one method to show a notification. This method creates the html tag for the notification, if was not created, and the widget.
Also i want to allow the user to choose if he wants to stack notifications or have just one at once on the screen (When a new notification was going to be shown, hide any other visible notification).

To achieve it I'm using the method onShow for checking if there is another notification previously shown. I can't figure out another way to do it.

Maybe I'm duplicating the widget, but it works fine for now.

Thanks.

[Dimo]

Hello Juan Jose,

There is a very easy way to check if a certain element already has a widget instance attached to it. For example, if a Notification instance does not exist for the #someID element, the following expression will return undefined, otherwise it will return the instance object.

$("#someID").data("kendoNotification")

Duplicate widget instances created over the same element can result in unexpected side effects and are strictly not recommended.

Regards,
Dimo
Telerik

 

 

[Fernando]

Hi Dimo,

Doing it that way solve the problem which notifications doesn't stack properly. It solves half of that i want to do, also I want to allow showing notifications which aren't be stacked. 

For this purpose the previous code worked fine, I'm wondering if there is any proper way to reinitialize the widget at any time i want to display a notification.

Thanks.

[Dimo]

Hi Juan Jose,

The proper way to reinitialize a widget is to destroy it first.

http://docs.telerik.com/kendo-ui/framework/widgets/destroy

I suggested how to resolve the stacking problem in my first reply in this thread.

Regards,
Dimo
Telerik

 

 

[Fernando]

Hi Dimo,

It's true that you suggested how to resolve the stacking problem, I forgot it because when I tried it i was using the onShow method which was a bad idea. Now I'm doing what you suggested before the show method and it works perfect.

Thanks a lot for your help, you've been really helpful.