Menu onClick Open & Close

11 posts, 0 answers
  1. Mike
    Mike avatar
    32 posts
    Member since:
    Nov 2011

    Posted 29 Mar 2012 Link to this post

    I'd like to implement the Kendo UI Menu, but I'd like it to open and close only on click events. I need this for 2 reasons:

    1. Click events are in keeping with touch-based devices. While the click functionality works perfectly on an iPad, I'd like it to work the same on PC's.
    2. The developers obviously spent some time to allow us to embed forms, grids, et cetera into a menu item, and it's annoying when someone's working on a form and the menu goes away simply because they moved their mouse.
    I'll gladly accept any workarounds, but I believe choosing between hover and click events is a great option to have.
  2.
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 29 Mar 2012 Link to this post

    Hi Angelo,

    Check the Menu openOnClick configuration option, which enables on Desktop the behavior you've seen on mobile devices.

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Mike
    Mike avatar
    32 posts
    Member since:
    Nov 2011

    Posted 29 Mar 2012 Link to this post

    The documentation states this is for root sub-menus, but I need it for the root menu itself.
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 29 Mar 2012 Link to this post

    Hello Angelo,

    I'm not sure what do you mean by that. OpenOnClick option works like this: the Menu root items are not opened when hovered. When the user clicks on a root item which sports sub items - it opens. After that, the menu is closed by clicking outside of the sub menu. While opened you can hover the other items and they will open on hover. If you close it - you will need another click to open it again. This works the same way on mobile devices with the exception that there are no hovers, so you will always need a click to open any item.

    If you want the sub menus to also close when you click on an item (as opposed to outside of the sub menu), there is another option for that.

    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Mike
    Mike avatar
    32 posts
    Member since:
    Nov 2011

    Posted 29 Mar 2012 Link to this post

    This is what happens when I use openOnClick:

    • The root menu consists of three items; none has items with sub-menus, 1 contains a form and the other 2 contain select options.
    • If I hover over a menu item, it doesn't open (that's good).
    • If I click a menu item, its menu opens (also good).
    • If I hover over the other 2 root menu items while one is open, the one I actively opened closes, and the hover action takes over (not good).
    I need the root menu's clicked item to be sticky until I click another root menu item. I don't want the other menu items to open on hover while one is open.

    I've experimented with using e.preventDefault in the close configuration, and it's close to what I need, but not quite.
  11. Mike
    Mike avatar
    32 posts
    Member since:
    Nov 2011

    Posted 30 Mar 2012 Link to this post

    For those wanting click-only open/close functionality, I achieved it by commenting out this code from kendo.all.min.js:

    (!c.options.openOnClick||c.clicked)&&!N(b.currentTarget,b.relatedTarget)&&e&&c.open(d),c.options.openOnClick&&c.clicked&&d.siblings().each(g(function(a,b){c.close(b)},c))

    And by setting openOnClick to true.
  13. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 30 Mar 2012 Link to this post

    Hello Angelo,

    Correct - by design the Kendo Menu behavior resembles the native menus on different platforms as this is what is most requested by our clients. Good to know that you modified it to your liking. If you want us to add an option for changing this behavior, please use the Kendo UI feedback page at UserVoice.

    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Michael
    Michael avatar
    28 posts
    Member since:
    Nov 2005

    Posted 31 Jan 2013 Link to this post

    Was this feature added?
  17. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 04 Feb 2013 Link to this post

    Hi Michael,

    No, no such option yet. You may want to vote up Angelo's feature request if you want to see this feature implemented.

    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  19. CRAIG
    CRAIG avatar
    5 posts
    Member since:
    Jan 2011

    Posted 22 Jan 2016 in reply to Kamen Bundev Link to this post

    The openOnClick link doesn't appear to work any longer. Do you have an updated one?
  20.
  21. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 28 Jan 2016 Link to this post

    Hi Craig,

    I tested the openOnClick option and it is working as expected. Could you please take a look at this short screencast capture and let me know if I am missing something?

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top