Contact us
Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Calling javascript synchronously by Enver Haase, 1 month ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

PopupView in a Grid's cell

Vlas Titov
6 years ago Sep 12, 2016 2:59pm

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

Anastasia Smirnova
6 years ago Sep 13, 2016 6:41am

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

Deleted User
6 years ago Nov 22, 2016 7:04pm

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;
     }
});
Deleted User
6 years ago Nov 22, 2016 7:08pm

Attached screenshot.

Vlas Titov
6 years ago Nov 23, 2016 12:36pm

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