Tatu2
May 10, 2024, 1:53pm
1
One of the common things you may need when using ContextMenu with Grid is to get access to item in the Grid on which ContextMenu was opened. The current API is a bit clumsy at the moment, and the documentation does not give all the details. I have described who it can be done it this ticket for improvement:
opened 07:34AM - 10 May 24 UTC
We are lacking `GridConextMenu`. Hence doing `ContextMenu` to operate Grid items… is having bad DX.
Here are some additional code you need for getting the Grid item and use it when menu item selected
First import the types you need
```
import { Grid, type GridElement } from '@hilla/react-components/Grid.js';
import { ContextMenu, ContextMenuItemSelectedEvent } from '@hilla/react-components/ContextMenu.js';
```
We need to use ref to get underlying element for listening context menu open in Grid
```
const gridRef = useRef<GridElement>(null);
const [contextItem, setContextItem] = useState<Item | undefined>(undefined);
```
We set the opening listener in useEffect using the ref. There we can get the item on which the menu was opened, can set state variable of the last item where opening happened
```
useEffect(() => {
const grid = gridRef.current;
if (grid) {
// Workaround: Prevent opening context menu on header row.
// @ts-expect-error vaadin-contextmenu isn't a GridElement event.
grid.addEventListener('vaadin-contextmenu', (e) => {
if (grid.getEventContext(e).section !== 'body') {
e.stopPropagation();
} else {
const item = grid.getEventContext(e).item;
setContextItem(item);
}
});
}
}, []);
```
Add menu item selected listener
`<ContextMenu onItemSelected={onContextMenu} items={menuItems}>`
This event is triggered when user selects menu item, thus happening after open event. And we can use the state variable contextItem we set at opening
```
function onContextMenu(e: ContextMenuItemSelectedEvent) {
Notification.show(contextItem?.name + ' clicked');
}
```
3 Likes