Vaadin 7 - add Buttons as generatedProperty to Grid

Question

I am filling a Grid with a beanItemContainer and i want to add several buttons for different functions and redirections in each of my rows.

So far i created a BeanItemContainer and wrapped it with a GeneratedPropertyContainer like this:

        private BeanItemContainer<Foo> fooContainer = new BeanItemContainer<Foo>(Foo.class);
        private GeneratedPropertyContainer wrapperContainer = new GeneratedPropertyContainer(fooContainer);

Now i tried to add a generated Property like this:

wrapperContainer.addGeneratedProperty("buttons", new PropertyValueGenerator<Button>()
        {

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

                @Override
                public void buttonClick(ClickEvent event)
                {
                    // do something
                }
            };

            Button button = new Button(FontAwesome.USER);
            button.addClickListener(fooBarClickListener);
            return button;
        }

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

and further down my Code

getColumn("buttons").setRenderer(new ButtonRenderer());

However, this is only one Button, where i need multiple and on top of that its not even working.

it fails with he following Error

Cannot remove converter, as renderer's presentation type java.lang.String and column's model com.vaadin.ui.Button type aren't directly compatible with each other (in Column[propertyId:buttons])

Also, instead of a button, a clickable icon (preferably a Fontawesome one) would be sufficient for my usecase.

Answer 1

The pattern of adding generated property to a Grid is as follows

        Grid grid = new Grid();
        ...
        ButtonRenderer buttonRenderer = new ButtonRenderer();
        ... // add click listener etc
        GeneratedPropertyContainer gpc = rowIndex.addGeneratedProperty("button1", container);
        grid.setContainerDataSource(gpc);
        grid.getColumn("button").setRenderer(buttonRenderer);

You will need one property i.e. one column per button. The ButtonRenderer does not know how to render multiple buttons in one column.

There is GridActionRenderer add-on in Vaadin Directory, which is more advanced renderer designed for the case where you want compactly set of buttons in one column, e.g. toolbox of operations

https://vaadin.com/directory/component/gridactionrenderer-add-on

I am also quite fond of alternative UX approach of this type of use cases, where you want to have something to trigger actions on Grid rows, and that is ContextMenu. Many buttons per row produce visual clutter, takes aways space that otherwise could be used for showing data, and also slows down your Grid rendering speed. So it is worth of thinking to put these operations in context menu instead.

https://vaadin.com/directory/component/vaadin-contextmenu