Menu onClick Open & Close

[Mike]

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.

[Kamen Bundev]

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

[Mike]

The documentation states this is for root sub-menus, but I need it for the root menu itself.

[Kamen Bundev]

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

[Mike]

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.

[Mike]

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.

[Kamen Bundev]

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

[Michael]

Was this feature added?

[Kamen Bundev]

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

[CRAIG]

The openOnClick link doesn't appear to work any longer. Do you have an updated one?

[Iliana Nikolova]

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