GeneratedPropertyContainer text and image in one grid cell

Vaadin 6 / 7 / 8
1

I have a contianer and have used GPC to add a FontAwesome Icon to a column of grid cells, but what I really want is

  1. To add an image (or two or three depending on edit, delete etc) to a cell an then be able to click on it/them
  2. Add an image after the text in the cell - for example to highlight a problem to the user.

can anyone point me in the right direction
Thanks

2

Have a look at
Component Renderer
 addon

3

thanks - I will
hopefully it is more flexible than GridUtil…

4

I have had a look at it
It is hard to tell whether it will allow me to add images to text in a cell or whether I can have more than one image in cell and use them as buttons
With regards to the documentation provided :
I can’t see how to get it to work in my project
It assumes too much knowledge from the user
The example code does not seem to be complete

5

Maybe I don’t have understood your question. Please, correct me if I’m wrong:

  1. To add an image (or two or three depending on edit, delete etc) to a cell an then be able to click on it/them

You can add a generated property whoose generator creates the components you need in the cell (buttons or even images with click listener)

gpc.addGeneratedProperty("btns", new PropertyValueGenerator<Component>() {
   public Component getValue(Item item, Object itemId, Object propertyId) {
           return new HorizontalLayout(
                   new Button(FontAwesome.SAVE),
                   new Image(null, new ThemeResource("images/icon.png"))
           );
     }
     public Class<Component> getType() { return Component.class; }
  });
grid.addColumn("btns").setRenderer(new ComponentRenderer());
  1. Add an image after the text in the cell - for example to highlight a problem to the user.

A solution could be add a custom CellStyleGenerator to the grid and add use CSS to show the image

grid.setCellStyleGenerator(cell ->
          ("myCell".equals(cell.getPropertyId()) && "err".equals(cell.getValue().toString()))
          ? "my-cell-warning" : null
) ;

and in your theme something like

td.my-cell-warning:after {
    content: "";
    margin-left: 10px;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(images/icon.png) center center no-repeat;
    vertical-align: middle;
}
6

Thank you for your response
I will certainly try it out when I get a moment

With regards to the text: I think the text you are displaying is more of a tooltip idea what I am after is a column of text and on certain items I need an image next to it displaying some sort of error icon - it would probably be much easier with a font awesome icon next to the text but sadly the images hav already been created and approved

7

I have a problem implimenting the first section
It tells me I have already a column for property id ‘btns’

Also I had a problem making the componentRendere work I had to change the code a bit:
grid.addColumn(“btns”).setRenderer((Renderer<?>) new ComponentRenderer());

any ideas?

8

That’s weird, it works for me; can you share some of your code?

For the cast in setRenderer check maybe yuo are importing the class from the wrong package;
it must be
de.datenhahn.vaadin.componentrenderer.ComponentRenderer
 not
de.datenhahn.vaadin.componentrenderer.client.ComponentRenderer

9

Hi I have tried again:
java.lang.IllegalStateException: A column for property id ‘btns’ already exists in this grid
at com.vaadin.ui.Grid.addColumn(Grid.java:5066)
at com.cbp.ui.transportRequest.TransportRequestView.getSearchResultComponent(TransportRequestView.java:300)

I have used you code

gpc.addGeneratedProperty(“btns”, new PropertyValueGenerator() {
public Component getValue(Item item, Object itemId, Object propertyId) {
return new HorizontalLayout(
new Button(FontAwesome.SAVE),
new Image(null, new ThemeResource(“images/table_images/add.png”))
);
}
public Class getType() { return Component.class; }
});
grid.addColumn(“btns”).setRenderer(new ComponentRenderer());

any ideas?

10

Ok, that happens to me when the container is given to the grid before the generated property is added.
To fix use
grid.getColumns(“btns”)
 instead of
grid.addColumn(“btns”)

Sorry for the wrong hint

11

Yes!
I made your change and I have another column with a button in it

It should be
grid.getColumn(“btns”)
singular

thanks!

now for the next bit - you didn’t really answer my question on whwther your solution to text and image was the case of adding an occasional image to text or a tooltip for images (I wanted the former)

12

Oooops. It was a typo; I meant
getColumn()
 :slight_smile:

13

Sorry, forgot to answer on text and images question.

The proposed css solution adds an image after the content of the cell as you can see in the attached image.
Is this what you want to achieve?

26031.png

14

the icon looks like it might work I will try it

15

OK problems!

I added your
grid.setCellStyleGenerator(cell →
(“myCell”.equals(cell.getPropertyId()) && “err”.equals(cell.getValue().toString()))
? “my-cell-warning” : null
) ;

and I get Lambda expressions are not supported at this language level - not sure what to do about that

Secondly:

I changed the
new Image(null, new ThemeResource(“images/icon.png”))
to a button which worked nicely BUT
I want to apply a style to it so it doesn’t have the default button characteristics
I would normally .setStyleName to the component but it is part of the ‘new’ so I am not sure how to do that

sorry !

16

I thought I might have had the answer for the style for the buttons :

        final Button earlyButton = new Button(null, new ThemeResource("images/clock.png"));
        final Button publishButton = new Button(null, new ThemeResource("images/publish.png"));
        earlyButton.setStyleName("tableIcon");
        publishButton.setStyleName("tableIcon");
        gpc.addGeneratedProperty("addOrRemove", new PropertyValueGenerator<Component>() {
            public Component getValue(Item item, Object itemId, Object propertyId) {
                return new HorizontalLayout(
                        new Button(FontAwesome.SAVE),
                        earlyButton , publishButton
                );
            }
            public Class<Component> getType() { return Component.class; }
        });
        grid.getColumn("addOrRemove").setRenderer(new ComponentRenderer());

but they dont appear at all now - inspecting the element - there is only the icon no images ;-(

17
  1. Substitute lambda expression with an anonymous class (like you did on grid.addGeneratedProperty(…))
grid.setCellStyleGenerator(new Grid.CellStyleGenerator()  {
     @Override public String getStyle(Grid.CellReference cell) {
            <your logic here> 
     }
});
  1. Create the buttons inside the PropertyValueGenerator.getValue method
gpc.addGeneratedProperty("addOrRemove", new PropertyValueGenerator<Component>() {
    public Component getValue(Item item, Object itemId, Object propertyId) {
        HorizontalLayout component = new HorizontalLayout();
        Button earlyButton = new Button(null, new ThemeResource("images/clock.png"));
        Button publishButton = new Button(null, new ThemeResource("images/publish.png"))
        component.addComponents(new Button(FontAwesome.SAVE),earlyButton , publishButton);        
        return component;
    }
    public Class<Component> getType() { return Component.class; }
});
18

thank you!