Auto Grid with Context Menu

Hilla
1

Hello everyone :wave: ,
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 :hushed: 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.

2

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>
    );
}
3

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.