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

Ezmeralda

Did you check the ButtonRenderer and the book example? – Fickle

@Fickle I think your comment is the answer. Another Link: vaadin.com/docs/-/part/framework/components/… (see ButtonRenderer paragraph) – Uncap

Thanks @Morfic. question solved :) by following the example – Ezmeralda

Cool, you can post your own implementation as a response and chose it as the correct answer to this question (you may have to wait a couple of days depending on your reputation). This is the preferred SO way of letting other people quickly find answers to similar issues they may have. @SteffenHarbich indeed, but it was meant as inspiration for the author to learn about where he can find more Vaadin details, samples, etc for his future work, and then chose his own way of solving the issue. Cheers guys :-) – Fickle

Answer 1

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" ) 

Wendt

Answer 2

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());

Lacrimator

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? – Mcdougall

@Mcdougall 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 – Lacrimator

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