Popover and Grid

Flow
1

Hello,

I’m trying to make a column in grid that will contain buttons and when user clicks on button in cell the Popover get displayed containing some complex content from clicked row item.

I’m creating column with LitRenderer but can’t understand how to get access to the grid’s cell element from within bound function. In that function I’m going to create and configure Popover, target it to cell and display to user.

grid.addColumn(LitRenderer.<M>of("""
            <vaadin-button @click="${clickHandler}" theme="tertiary-inline">
              Click me
            </vaadin-button>""").withFunction("clickHandler",
            item -> {
                Popover popover = new Popover();
                // Popover configuration goes here...
                popover.setTarget(???); // how to get grid's cell component here?
                popover.open();
            }));

Any advice?

2

I think you would need a custom web component wrapper to use Popover in that LitRenderer, and it would need to create the Popover configuration on the JavaScript/Lit side (see the Lit API at https://vaadin.com/docs/latest/components/popover#opening-triggers). Here’s a somewhat related issue, although not exactly the same thing: [popover] Popover generator API for Grid cells · Issue #7688 · vaadin/web-components · GitHub

2 Likes
3

LitRenderer has no reference to the client sided component by design. You would need a ComponentRenderer, what would increases heap, but at least you could re-use the Popover.

Or you could use a GridContextMenu and update your detail layout content on the DynamicContentHandler. You can add any component to the context menu:

var detailLayout = new HorizontalLayout();
var context = new GridContextMenu<Bo>();
context.add(detailLayout); 
/* context does NOT close on any other component than MenuItem (or outside click) */
context.addItem("Close details");
4

Thank you. Will try all suggested options.