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

Menu onClick Open & Close

10 Answers 658 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 29 Mar 2012, 04:57 PM
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.

10 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 29 Mar 2012, 05:59 PM
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!
0
Mike
Top achievements
Rank 1
answered on 29 Mar 2012, 06:02 PM
The documentation states this is for root sub-menus, but I need it for the root menu itself.
0
Kamen Bundev
Telerik team
answered on 29 Mar 2012, 06:27 PM
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!
0
Mike
Top achievements
Rank 1
answered on 29 Mar 2012, 07:36 PM
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.
0
Mike
Top achievements
Rank 1
answered on 30 Mar 2012, 05:15 PM
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.
0
Kamen Bundev
Telerik team
answered on 30 Mar 2012, 06:12 PM
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!
0
Michael
Top achievements
Rank 1
answered on 31 Jan 2013, 07:28 PM
Was this feature added?
0
Kamen Bundev
Telerik team
answered on 04 Feb 2013, 08:14 AM
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!
0
CRAIG
Top achievements
Rank 1
answered on 22 Jan 2016, 05:32 PM
The openOnClick link doesn't appear to work any longer. Do you have an updated one?
0
Iliana Nikolova
Telerik team
answered on 28 Jan 2016, 07:58 AM
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!
 
Tags
Menu
Asked by
Mike
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Mike
Top achievements
Rank 1
Michael
Top achievements
Rank 1
CRAIG
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or