Dynamic ContextMenu

Flow
1

I need to compose and display some kind of popup menu with dynamically configured items. Existing ContextMenu sutes quite good but I can’t figure out how to display it programmatically. The behavior I’m trying to achieve is following:

  • user clicks on a control button
  • application examines current form data and collects list of appropriate items
  • collected items transformed to MenuItem’s and placed into a “popup”
  • “popup” get displayed to user

Any ideas how to make this using standard components?

2

You could use the onOpenedChangeListener https://vaadin.com/api/platform/24.6.0.beta1/com/vaadin/flow/component/contextmenu/ContextMenu.html

3

Thank you. Looks promising.

But I’d like to have more control on “popup” opening, not only “opened-changed” events notification.

4

Then you might want to use a Dialog instead.

Also, tell us more about what you are trying to achieve.

5

Popover would be a better alternative, if ContextMenu doesn’t get the job done, but so far it sounds like we’re talking about a simple menu, for which it ContextMenu should be a good fit.

Also, in case the menu is opened from a Grid, there is a special API for that which actually makes it easier to do dynamic menu items based on the item: https://vaadin.com/docs/latest/components/grid#context-menu

6

As far as I know, there is no build in way to open the ContextMenu from server side.
Look at my post where I “convert” a client left click to a right click that opens the GridContextMenu. There I also collect data before the ContextMenu is opened.

You may want to use this on a Button Click Listener, so you can trigger a context menu open from the server side that requires once roundtrip:

// not tested code
button.addClickListener(clickEvent -> {
       button.getElement().executeJs("""
              $0.dispatchEvent(new MouseEvent('contextmenu', { 'view': window, 'bubbles': true, 'cancelable': true }))
       """, button ) /* the client element will be used as $0 */
})
7

Or you just use new ContextMenu().setOpenOnClick(true); for left click open.

1 Like
8

Yes, Popover suites good, but I can’t figure out how to render MenuItems inside it.

I’m trying to achieve dynamic behavior when user clicks a tool button - show him a “popup menu” populated with some context specific items or simply run some business logic an display a result.

9

Right, so the problem is that you can’t dynamically populate the menuitems, right?

I’m not sure if you can actually do that in the openlistener. I suspect not.

Maybe this could point you in the right direction: Add ContextMenu.open(x, y) to allow programmatic open of the menu · Issue #3606 · vaadin/flow-components · GitHub

Or this: Context is missing from context menu · Issue #1642 · vaadin/flow-components · GitHub

10

Thank you very much. Very promising points.

11

There’s also a protected onBeforeOpenMenu method that one should be able to use to intercept the opening process and at that stage populate it.

12

Will try this option also. Thanks.