vaadin / flow-components

Java counterpart of Vaadin Web Components
100 stars 66 forks source link

Add support for ContextMenu on Grid header #5821

Open guttormvik2 opened 10 months ago

guttormvik2 commented 10 months ago

Describe your motivation

I want to have a menu on the grid headers to:

Describe the solution you'd like

I always regenerate menus on open in setDynamicContentHandler, so for my use-case I'd like it if there was an event parameter with all the required information:

Not sure if anyone wants today's menu showing up on the header. I see in your own examples that you suppress it by returning false if row is null. I would be happy if there was a separate grid.addContextMenuHeader. Even then, I'd like to know the column in both cases, so I'd like changing dynamicContentHandler to get in an event with more info.

Describe alternatives you've considered

https://stackoverflow.com/questions/68311746/how-to-add-click-listener-or-context-menu-to-vaadins-grid-column-header

It's all just so needlessly hacky. Vaadin has all the information. Just pass it on.

This could be placed in the main menu, but we already use that extensively and want to separate this out. The header is also where our customers expect to find it.

Testing on row==null is not enough, since the body-menu has entries that should show when there are no rows

Additional context

No response

juuso-vaadin commented 10 months ago

This isn't a solution to the technical issue, but I'd still like to suggest an alternative that provides better UX. Challenge with context menus is their poor discoverability. Some additional visual indicator would be needed in Grid headers to communicate that there are actions. Keyboard usability would also need to be handled somehow. Furthermore the user would need some way to show a hidden column but there is no obvious item to reset visibility.

I'd suggest adding a custom Grid header toolbar. In addition to column controls, it could handle a title, number of items, triggering filters, export and any other grid related actions. image

Vaadin docs has an example for getting started with such UI pattern: https://vaadin.com/docs/latest/components/grid#column-visibility

Context menus in column headers would still be a good addition to the grid header toolbar pattern.

guttormvik2 commented 10 months ago

@juuso-vaadin, the workaround you suggest isn't bad, but I would've liked to port my Vaadin 7/8 app without being forced to redesign. Especially when this limitation seems so needless.

Still, your suggestion is something I can try now, so I'll give it a go. Thanks :)

yuriy-fix commented 10 months ago

Related enhancement: https://github.com/vaadin/web-components/issues/986

yuriy-fix commented 10 months ago

Dependant on https://github.com/vaadin/flow-components/issues/1939