Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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:
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;
}
In attachment you can see a result of those actions.|
Hopefully, it will help you
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.
Hello,
Thanks for your responce, but my question was related to the Grid, not the Table