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

Click Event

10 Answers 1033 Views
Notification
This is a migrated thread and some comments may be shown as answers.
Andy Macourek
Top achievements
Rank 1
Andy Macourek asked on 13 Jun 2014, 11:13 PM
I would like to have a notification that auto hides after a period, but allows for a separate click event.  Any idea how to do this?

10 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Jun 2014, 02:15 PM
Hello Andy,

You can attach a click event handler to a custom element inside the notification template, and prevent event bubbling (propagation) in your handler. In this way the Notification widget will not be aware of the custom user click.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peter
Top achievements
Rank 1
answered on 09 Mar 2015, 04:51 AM
This is proving a little difficult to my way of doing it.
No matter what base element I use,using jquery's delegate event syntax eg $('#mybaseElement').on('click', '.myElement', function () { alert('!') }
My event is never triggered.
Is kendo gazumping such event? Or would I just be doing something wrong?
0
Peter
Top achievements
Rank 1
answered on 09 Mar 2015, 05:04 AM
Just using coffee:

@notify =
$('#cell-error-notification').kendoNotification(
templates: [
type: 'cell-error'
template:
"""
<div class="error-notification">
<div class="title"> #= title # </div>
<div class="message"> #= message # </div>
<div class="detail"> <a href="\\#"> Click for error details </a> </div>
</div>
"""
]).data('kendoNotification')


$('#error-notification').on 'click', 'a', (e) ->
console.log 'clicked'
alert 'clicked!'

Even if I try something like
$('body').on 'click', '.error-notification'

I still cannot get an event triggered when I click in that section on the notification

I know I'm going to need a demo, but at this point, what could be preventing this from working?
Is Kendo doing something which would suppress these events from triggering?












0
Dimo
Telerik team
answered on 11 Mar 2015, 07:04 AM
Hello Peter,

The desired behavior should be achieved with a click handler. The Notification widget does not prevent or stop any click handlers currently. Please make sure that your handler is attached correctly. For example, I see that an ID is used instead of a class name for "error-notification", which naturally will not work.

Here are two examples.

1. Go to http://demos.telerik.com/kendo-ui/notification/templates

2. Open an "error" notification by clicking on the respective button.

3. Execute the following in the browser's Javascript console:

$(document.body).on("click", ".wrong-pass", function(){ alert(1); });

4. Click on the open notification popup. A "1" alert will be displayed.

===

1. On the same page, open a new "error" notification

2. Execute the following in the browser's Javascript console:

$(".wrong-pass").on("click", "img", function(){ alert(2); });

3. Click on the (X) image inside the notification popup. A "2" alert will be displayed. If you haven't reloaded the page, a "1" alert will be displayed as well.


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Peter
Top achievements
Rank 1
answered on 12 Mar 2015, 10:40 PM
Yes, thanks. I think you've proved that it works in principal.
I can get mine to work if I put the base selector on document.body, but not when I put it on a lower child element.
I'll try a few more things and let you know.
0
Peter
Top achievements
Rank 1
answered on 12 Mar 2015, 11:34 PM
Actually, I believe I've found the fundamental issue for me.
In your example, I really need this to work
Open the demo page you linked to...
For the way my code is written - I really need below to work - and it doesn't.

$("#notification").on("click", "img", function(){ alert(2); });

Even though this does
$(".wrong-pass").on("click", "img", function(){ alert(2); });
0
Peter
Top achievements
Rank 1
answered on 12 Mar 2015, 11:43 PM
Also (sorry to spam a few messages)

Also this doesn't work on your demo page.
If this worked, I could also use this.

$("#example").on("click", ".wrong-pass", function(){ alert('parent based click'); });
0
Dimo
Telerik team
answered on 13 Mar 2015, 09:35 AM
Hello Peter,

Keep in mind that the popup notifications are rendered as children of the <body> element, so naturally, delegated click handlers that rely on some inner page element will not work.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peter
Top achievements
Rank 1
answered on 15 Mar 2015, 10:59 PM
Yes, fair enough.
My problem is that I have multiple tabs, with different notifications on each. So the context of where the notification is from, is critical to attaching events to - otherwise every click will fire all listening events on all tabs.

So maybe you can appreciate that this solution (top of this thread) is awkward for this situation?
That it's not a generic solution.
That is, to get click events on notifications when my solution is based on the context of where the click came from.
Which the kendo notifications cannot give me, because they are all basically "global"

It would possibly be much easier, if the kendo notification had a click event of it's own (it only has show/hide).
This would ensure my click would only be picked up by the owner.
Otherwise, I'll have to build something like this in.
0
Dimo
Telerik team
answered on 17 Mar 2015, 04:55 PM
Hi Peter,

Theoretically, each notification popup has a GUID applied as a CSS class to its outermost element, which is a div.k-animation-container. This GUID matches the internal _guid field of the Notification widget instance, which has triggered the respective popup. You can use this information to differentiate between popups from different Notification instances.

http://docs.telerik.com/kendo-ui/web/notification/overview#popup-messages


$("#notification").data("kendoNotification")._guid


On the other hand, I suppose it will be easy to use some unique HTML markup in each notification template (e.g. custom CSS class), so that you quickly find out which is the widget instance in the click event handler.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Notification
Asked by
Andy Macourek
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Peter
Top achievements
Rank 1
Share this question
or