right click on grid

Flow
1

Hello,
how may I get the right click event on a grid?
and how may I select the grid line while right clicking
(so for the context menu to work on the new selected item?)

2

In Vaadin 13 ItemClickListener was added. There is getButton() method in itemClick event, which you can use to determine which button was clicked.

https://vaadin.com/api/platform/13.0.3/com/vaadin/flow/component/ClickEvent.html#getButton--

3

I may loose something, but itemClickListener (in my code) fires only on main button,
it does not fires on right click
instead the broser menu appear (and consumes the event)
if I create my own context menu then my context menu opens and again consumes the event
so right click event never comes

4

You are right, there is no prevent default option there.

5

This ticket is related: https://github.com/vaadin/flow/issues/1363

6

Also, on 14.0.12 version the right click is not triggered on buttons.
for example:

button.addClickListener(buttonClickEvent -> {
            buttonClickEvent.getButton();
        });

is executed only on left click.

7

If anyone is interested in a workaround for a custom ContextMenu in a Grid:
(code has been modified to fit here without testing)

// Listen for "contextmenu" event on the client side
grid.getElement().addEventListener("contextmenu", event -> {

	// Get coordinates for the ContextMenu position (see addEventData() below)
	int clientX = (int) event.getEventData().getNumber("event.clientX");
	int clientY = (int) event.getEventData().getNumber("event.clientY");

	// Get the selected Item
	String key = event.getEventData().get("event.currentTarget.getEventContext(event).item.key").asString();
	Item item = grid.getDataCommunicator().getKeyMapper().get(key);

	if (item == null)
		return;

	// Visually select the item (Feedback for user)
	grid.select(item);

	if(contextMenu == null) {
		// create the ContextMenu and add it to the Layout
		contextMenu = new ContextMenu();
		getContent().add(contextMenu);
	}

	// Clear the contextMenu
	contextMenu.removeAll();

	// Now add MenuItems that can use the rightclicked item in the Grid
	contextMenu.addItem("MenuEntry 1: " + item.getValue, itemClick -> {
			// MenuItem clicked
			// doSomethingWithItem(item)
		});
	}

	// Open the ContextMenu by code at given Position
	contextMenu.getElement().executeJs("this.open({ target: $0, detail: { x: $1, y: $2 }, clientX: $1, clientY: $2, preventDefault: () => {}, stopPropagation: () => {} })",
			grid, clientX, clientY);


}).addEventData("event.preventDefault()") // Prevent the default Browser ContextMenu
		.addEventData("event.clientX") // Get X Coordinate
		.addEventData("event.clientY") // Get Y coordinate
		// Workaround to get the key of the clicked Item
		.addEventData("event.currentTarget.getEventContext(event).item.key");
8

In the old GridContextMenu you could modify the menu by using the addMenuOpenedListener, now you are supposed to use the setDynamicContentHandler.

Is there a really good reason for why the column info is left out, since it makes it impossible to modify the menu content depending on cell?

Any smart workarounds anyone?

/Joakim