How to add button in a Grid in Vaadin

Question

Hi Im try to add button in a grid in vaadin but it print the reference on button object.

Grid statementEnquiriesList = new Grid();
statementEnquiriesList.addColumn("", Button.class);
        statementEnquiriesList.addColumn("DATE/TIME", String.class);
        statementEnquiriesList.addColumn("TRANSACTION ID", String.class);
        statementEnquiriesList.addColumn("FROM", String.class);

// historyList is an array object
for (int i = 0; i < historyList.size(); i++)
{
    HistoryList recordObj = historyList.get(i);
    Button addBtn = new Button();
    addBtn.setCaption("Add");
    statementEnquiriesList.addRow(addBtn , recordObj.getDate(), recordObj.getTransactionId(), recordObj.getFrom());
}

how can i print "Add" caption on this

Solution 1

You cannot use component in grid directly in Vaadin 7. You have to use ButtonRenderer to render a button

RendererClickListener ownerClickListener = new RendererClickListener() {

    private static final long serialVersionUID = 1L;

    @Override
    public void click(RendererClickEvent event) {
        //Someone clicked button
    }
};
ButtonRenderer ownerRenderer = new ButtonRenderer(ownerClickListener, "");
grid.getColumn("ownerName").setRenderer(ownerRenderer);

But you can use components in Vaadin 8, see Grid Components in Vaadin 8.

I am using Vaadin 7 and ButtonRenderer was unsatisfactory for me because there is no way to add FontIcon to button and there is no way to insert it as HTML. Instead I used component renderer addon. Here is how I used it:

Grid grid = new Grid();
BeanItemContainer<EventChange> dataSource = //... primary data source
GeneratedPropertyContainer dataSource2 = new GeneratedPropertyContainer(dataSource);
grid.setContainerDataSource(dataSource2);
dataSource2.addGeneratedProperty("ownerWithButton", new PropertyValueGenerator<Component>() {

        private static final long serialVersionUID = 1L;

        @Override
        public Component getValue(Item item, Object itemId, Object propertyId) {
            ClickListener ownerClickListener = new ClickListener() {

                private static final long serialVersionUID = 1L;
                @Override
                public void buttonClick(ClickEvent event) {
                    // do something, user clicked button for itemId
                }
            };
            Button button = new Button(FontAwesome.USER);
            button.addClickListener(ownerClickListener);
            return button;
        }

        @Override
        public Class<Component> getType() {
            return Component.class;
        }
    });
grid.setColumns("ownerWithButton", /*and rest of your columns*/);
grid.getColumn("ownerWithButton").setRenderer( new ComponentRenderer());

Solution 2

Vaadin 8.1 - Components in Grid

Vaadin 8.1 now has a built-in ComponentRenderer for displaying buttons or other components including your own custom components in a Grid.

See first item "Components in Grid" on What's New page.

Example: Add a label to a grid.

grid.addColumn(
    person -> new Label( person.getFullName() ) ,
    new ComponentRenderer()
).setCaption( "Full Name" ) 

Comments

[Pere]

I'm trying to use this add-on in v7 on a Grid with an IndexedContainer, and I'm unable to. I tried to follow this example (or the ClassicGridTab.java in the demo sources) - it uses BeanItemContainer and I suspect my errors are due to that. Tried with the NotABeanGridWithDecoratorTab.java demo also but it uses a GeneratedPropertyContainer. So I'm terribly lost now. Any hints on how to get this working?

[Piro]

@Pere you need GeneratedPropertyContainer to create property that returns components to show, and you need other containter that holds your primary data. Grid must user GeneratedPropertyContainer data source so it can see original data and generated data. I do not see settings data source to grid in my example, so is this your issue? I will edit my answer ASAP. Maybe try creating new question

[Pere]

Thanks for helping, @Piro. There's no really need for editing your answer; your comment clarifies it all. Will try your hint ;)