Vaadin 7.4 Beta3 Grid ButtonRenderer add specific style (icon) to the butto

Did some tests with the grid and did not find any example how to :

  1. Add specific style to the button element (icon only), not sure if below Button Renderer should be used?

emailLogGrid.getColumn(“preview”).setRenderer(
new ButtonRenderer(new RendererClickListener() {

                public void click(RendererClickEvent event) {

                 //   Item item = cont.getItem(event.getItemId());

                  

                }
            }));
  1. Get date filter in order to filter content using from_date and to_date.

I would appreciate in case somone has few tips how to sort this out.

Regards,
Mirko

I would appreciate if anyone could provide some feedback.

Thank you.

If the icon is a ThemeResource, you need to do the following:

  1. you should wrap your container in GeneratedPropertyContainer:

GeneratedPropertyContainer wrapperCont = new GeneratedPropertyContainer(yourContainer); grid.setContainerDataSource(wrapperCont); 2. add a generated property to wrapperCont:

[code]
wrapperCont.addGeneratedProperty(“###button”, new PropertyValueGenerator() {

@Override
public Resource getValue(Item item, Object itemId, Object propertyId) {
    return new ThemeResource("img/xxx.png");
}

@Override
public Class<Resource> getType() {
    return Resource.class;
}

});
[/code]3. set renderer for the column:

grid.getColumn("###button").setRenderer(new ImageRenderer(yourEventHandler));
  1. if you have many icons, it may be worthwhile to create following class:

[code]
public final class StaticResourceGenerator extends PropertyValueGenerator {

private final Resource resource;

public StaticResourceGenerator(Resource resource) {
    this.resource = resource;
}

@Override
public String getValue(Item item, Object itemId, Object propertyId) {
    return new ThemeResource("img/xxx.png");
}

@Override
public Class<Resource> getType() {
    return Resource.class;
}

}
[/code]Then, in step 2, you will write only this:

wrapperCont.addGeneratedProperty("###button", new StaticResourceGenerator(
    new ThemeResource("img/xxx.png")));

There is also possibility to use FontIcon. First, you need to add HtmlButtonRenderer. I created an enhancement request for this, maybe it will be included in vaadin: https://dev.vaadin.com/ticket/18025. Here is the code:

Add HtmlButtonRenderer class:

package yourpackage.widgetset.HtmlButtonRenderer;

import com.vaadin.ui.renderers.ButtonRenderer;

public class HtmlButtonRenderer extends ButtonRenderer {
    public HtmlButtonRenderer() {
        super();
    }
    public HtmlButtonRenderer(RendererClickListener listener) {
        super(listener);
    }
}

Then, add following two classes to a client package under your widgetset:

package yourpackage.widgetset.[b]
client
[/b];

import com.vaadin.client.connectors.ButtonRendererConnector;
import com.vaadin.shared.ui.Connect;

@Connect(yourpackage.widgetset.HtmlButtonRenderer.class)
public class HtmlButtonRendererConnector extends ButtonRendererConnector {
    @Override
    public VHtmlButtonRenderer getRenderer() {
        return (VHtmlButtonRenderer) super.getRenderer();
    }
}
package yourpackage.widgetset.client;

import com.google.gwt.user.client.ui.Button;
import com.vaadin.client.renderers.ButtonRenderer;
import com.vaadin.client.widget.grid.RendererCellReference;

public class VHtmlButtonRenderer extends ButtonRenderer {

    @Override
    public void render(RendererCellReference cell, String text, Button button) {
        if (text != null)
            button.setHTML(text);
        // this is to allow the button to disappear, if the text is null
        button.setVisible(text != null);
    }
}

Now use similar way as in previous post, but use the HtmlButtonRenderer and the PropertyValueGenerator should look like this:

public final class FontIconGenerator extends PropertyValueGenerator<String> {
   
    private final FontIcon fontIcon;
   
    public FontIconGenerator(FontIcon icon) {
        this.fontIcon = icon;
    }
   
    @Override
    public String getValue(Item item, Object itemId, Object propertyId) {
        return icon.getHtml();
    }
    @Override
    public Class<String> getType() {
        return String.class;
    }
}

I tried to run your implementation but I only get HTML code inside the button, please check the attached image
21045.png

Did you set the renderer to the column?
Grid myGrid = ...; grid.getColumn(columnId).setRenderer(new HtmlButtonRenderer(yourEventHandler));

Yes, I created a widgetset, compile, setted the renderer to the column and the icon won’t show up :frowning:

Can you verify the HTML its generating is proper? This could happen when html is bad and browser couldn’t display it.

Do you have the Connector and VHtmlButtonRenderer in the client package? All client side code must be there.

To avoid double posts:

https://vaadin.com/forum#!/thread/10829555

I dont know how to implement the RendererClickListener please help …
Im using 7.5.5 version
21405.png

Hi, I’ve got same problem as David, I’ve created a package and put the 3 classes inside, when i rendederer the row with a button and simple inside it doesn’t work i’ve got a caption starting by HTML tag visible.
Is there any something way to add fontawesome inside or button.icon maybe ?
Otherelse the click is working well :smiley:
Thx

This worked. Really thanks for that :smiley:

The conversation was very helpfull to me.

Thanks Alot.

This was really good and detailed post. Thanks a lot.

Would you be interested to get HTMLButtonRenderer into Renderers Collection add-on? I already implemented the DeleteButtonRenderer so that you can use icons in it.

https://vaadin.com/directory/component/grid-renderers-collection-for-vaadin7