Hello everyone ,
I would like to add a Context Menu to an Auto Grid. The documentation on Auto Grid says You can also customize the underlying Grid component properties in Auto Grid.
(Auto Grid | Components | React | Hilla Docs). The documentation on Grid provides an example for a Context Menu: Grid | Components | React | Hilla Docs. Unfortunately, Auto Grid has no React ref
attribute This means, I cannot apply the Context Menu example of Grid to Auto Grid. Did I miss something? I’m using Hilla 2.4.0. Any tips or ideas are very welcome. Thank you.
In the upcoming version, there will be a ref for AutoGrid
, but it doesn’t expose the grid element yet. You could create a feature request here: https://github.com/vaadin/hilla/issues
As a workaround, you can use a DOM query to access the underlying vaadin-grid
element that AutoGrid
renders:
type MenuProps = Readonly<{
context: ContextMenuRendererContext;
original: ContextMenuElement;
}>
export function ProductsView() {
const renderMenu = ({context, original}: MenuProps) => {
const grid = original.querySelector('vaadin-grid') as GridElement<Product>;
if (!grid) {
return null;
}
const {sourceEvent} = context.detail as { sourceEvent: Event };
const eventContext = grid.getEventContext(sourceEvent);
const product = eventContext.item;
if (!product) {
return null;
}
return (
<ListBox>
<Item>Product: {product.name}</Item>
</ListBox>
);
};
return (
<ContextMenu renderer={renderMenu}>
<AutoGrid service={ProductService} model={ProductModel}/>
</ContextMenu>
);
}
Hey @cheerful-baboon,
Thank you for your response. Using the DOM query is a nice workaround! I’ll give that a try. Good to know, that Auto Gird will have a ref attribute in the upcoming version of Hilla.