PopupView in a Grid's cell

Hi,
Can someone advise how to use Renderer to display PopupView by clicking on a Label in a Grid’s cell?

Hello,
I will suggest you a workaround, if it will be appropriative for you, that’s cool.
I have added a ButtonRenderer to a grid instead of Label you use in your example. After that, I stylied button to make it looks like a Label. By clicking it a popUpView is opened.
Here is a code for Grid and popupView itself:
[size=2]
[font=verdana]

  1. UI class
    final VerticalLayout layout = new VerticalLayout();
    Grid grid = new Grid();
    // Define some columns

VerticalLayout popupContent = new VerticalLayout();
popupContent.addComponent(new TextField(“Textfield”));
popupContent.addComponent(new Button(“Button”));

// The component itself
PopupView popup = new PopupView(null, popupContent);
ButtonRenderer ab = new ButtonRenderer();
ab.addClickListener(event → {
System.out.println(“etrrtety6tytu”);
popup.setPopupVisible(true);
});
grid.addColumn(“name”, String.class).setRenderer(ab);
grid.addColumn(“born”, Double.class)
.setRenderer(new ProgressBarRenderer());

// Add some data rows
grid.addRow(“Nicolaus Copernicus”, 0.1);
grid.addRow(“Galileo Galilei”, 0.42);
grid.addRow(“Johannes Kepler”, 1.0);

layout.addComponent(grid);

layout.addComponents(grid, popup);
layout.setMargin(true);
layout.setSpacing(true);

setContent(layout);

2)Style for button in .scss file:
.v-nativebutton{
align-items: flex-start;
text-align: center;
cursor: default;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: inherit;
background-color: none;
box-sizing: initial;
padding: 0px 0px 0px;
border-width: 0px;
border-style: outset;
border-color: inherit;
background-color: inherit;
}
[/font]
[/size]

In attachment you can see a result of those actions.|
Hopefully, it will help you
28004.jpg

Hello,

Another better solution:

PopupView popup = null;
.
.

VerticalLayout popupContent = new VerticalLayout();
TextField tf = new TextField();
tf.setInputPrompt("Enter Comments");
popupContent.addComponent(tf);
.
.
table.addGeneratedColumn("comments", new ColumnGenerator() {
    @Override
    public Object generateCell(Table source, Object itemId, Object columnId) {
       Button btn = new Button();
       btn.setIcon(FontAwesome.COMMENT);
       btn.setDescription("This is a comment. Popview details are shown in inline popup.");
       btn.addStyleName(ValoTheme.BUTTON_BORDERLESS);
       btn.addStyleName("lightblueicon largeIcon");

       HorizontalLayout commentsLayout = new HorizontalLayout();
       commentsLayout.addComponents(btn);
       btn.addClickListener(listener -> {
          if(popup != null) {
            popup.setPopupVisible(false);
          }
          popup = new PopupView(null, popupContent);
          commentsLayout.addComponent(popup);
          popup.setHideOnMouseOut(false);
          popup.setPopupVisible(true);
       });
       return commentsLayout;
     }
});

Attached screenshot.
29101.png

Hello,
Thanks for your responce, but my question was related to the Grid, not the Table