Table showing a PopupView when double clicking a cell.

Hi,

I could use some advice on the following requirement:

Upon double clicking a Table cell, I’d like to display a PopupView (ideally centered on the cell) with some meta data about the content but I not sure about the best way to proceed. The table datasource is a JPA container. Is there a way to achieve this without fiddling with the client side?

Your inputs will be greatly appreciated. Thanks!

I’d try to place clickable
Components Inside a Table
https://vaadin.com/book/-/page/components.table.html and handle the double clicking in a special implementation of the click listener. I think a css layout would be my first choice.

Why just not use item click listener?

        table.addItemClickListener(new ItemClickListener() {
            
            @Override
            public void itemClick(ItemClickEvent event) {
                if (event.isDoubleClick()){
                    //create window with info about event.getItemId()
                }
            }
        });

The table is fed with a JPA container. So the idea is to display entities, potentially with nested properties. Adding components inside the table is too coarse an approach here.

I meant a PopupView, not a Window object.
​And the PopupView should be centered on the cell.

So far I managed the following:

  • PopupView and Table components added to an AbsoluteLayout.
  • I added an ItemClickListener to the table and reposition the PopupView according to the mouse click coordinates retrieved from the ItemClickEvent.

The pop up process works quite seemlessly except for the coordinates. How do I get the getRelative[X|Y]
() methods of the ItemClickEvent to return anything other than -1?

Only the getClient[X|Y]
() currently return the (absolute) mouse click coordinates. This is fine for X as the AbsoluteLayout starts from the left most edge (ie. has absolute left = 0) but not from top most edge. I would need the coordinates relative to the AbsoluteLayout or else it’ll result in in the PopupView having a vertical offset.

Any advice would be very kind.

Okay, if anyone’s interested:
Register a LayoutClickListener on the AbsoluteLayout too and set the PopupView coordinates from the now different from -1 relative X and Y.

Won’t get my name into the hall of fame but that’ll do for now.

A client-side implementation would be more elegant and would also enable me to center the PopupView on the cell.

Here’s a (much) cleaner way to do it:

  • Implement a custom TableFieldFactory that renders each cells with a PopupView that implements the Field interface.

That way, the table is still lean in read mode and the DOM complexity of rendering a PopupView in the cells is the same as having plain text.

Setting the PopupView width to 100% moreover centers the popup div.

Hi Okihara,

can you provide a simplified example of your solution?

Is it also possible to (mis)use the popupview for a quick form or does it disappear to quick?

Regards,
Aydin