Click Event

11 posts, 0 answers
  1. Andy Macourek
    Andy  Macourek avatar
    30 posts
    Member since:
    Mar 2010

    Posted 13 Jun 2014 Link to this post

    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?
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 16 Jun 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 08 Mar 2015 in reply to Dimo Link to this post

    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?
  5. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 09 Mar 2015 in reply to Peter Link to this post

    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?












  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Mar 2015 Link to this post

    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!
  7. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 12 Mar 2015 in reply to Dimo Link to this post

    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.
  8. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 12 Mar 2015 in reply to Dimo Link to this post

    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); });
  9. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 12 Mar 2015 in reply to Dimo Link to this post

    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'); });
  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Mar 2015 Link to this post

    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!
     
  11. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 15 Mar 2015 in reply to Dimo Link to this post

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

    Posted 17 Mar 2015 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready