How to display checkboxes instead of boolean in va

Question

I'm trying to display my boolean values as a checkbox in a vaadin grid. I can't use the multi selection mode because i need two columns with checkboxes. The columns of the Checkboxes shell have a Caption but the Checkboxes itself shell be without a caption. Does anyone have an idea ?

Answer 1

I suggest to use this repo https://github.com/vaadin/grid-renderers-collection-addon. This project is developed by Vaadin devs and it provides CheckboxRenderer class. You can see it in demo but using it is very simple.

First you have to add repository and dependency into your project. In maven it looks like this:

...
<repositories>
    ...
    <repository>
        <id>vaadin-addons</id>
        <url>http://maven.vaadin.com/vaadin-addons</url>
    </repository>
</repositories>
...
<dependencies>
    ...
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>grid-renderers-collection-addon</artifactId>
        <version>0.94</version>
    </dependency>
</dependencies>
...

Then you can use it like this:

grid.getColumn(columnName).setRenderer(new CheckboxRenderer());

You can also easily add listener:

CheckboxRenderer renderer = new CheckboxRenderer();
grid.getColumn(columnName).setRenderer(renderer);
grid.getColumn(columnName).setHeaderCaption("");
renderer.addClickListener(e -> System.out.println("Hello listener!"));

Answer 2

You have to add generated columns for your checkboxes

    GeneratedPropertyContainer gpcontainer = new GeneratedPropertyContainer(container);
    gpcontainer.addGeneratedProperty("columnName",
        new PropertyValueGenerator<CheckBox>() {
        @Override
        public CheckBox getValue(Item item, Object itemId,
                                Object propertyId) {

            // set checkBox listener etc. in here
            return new CheckBox();
        }

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

Grid grid = new Grid(gpcontainer);

You can find more detailed example in here in section "GeneratedPropertyContainer"

https://vaadin.com/docs/-/part/framework/datamodel/datamodel-container.html#datamodel.container.gpc

EDIT: Also set `ComponentRenderer' for your column

mainGrid.addColumn(COLUMN).setRenderer(new ComponentRenderer())

Answer 3

If you only need a read-only checkbox, this worked for me:

grid.getColumn("columnId").setRenderer(new HtmlRenderer(), new BooleanConverter());

HtmlRenderer is provided by the Vaadin framework, and the boolean converter looks like this:

public class BooleanConverter implements Converter<String, Boolean>
{   
  @Override
  public Boolean convertToModel(String value, Class<? extends Boolean> targetType, Locale locale) throws ConversionException
  {
    return null;
  }

  @Override
  public String convertToPresentation(Boolean value, Class<? extends String> targetType, Locale locale) throws ConversionException
  {
    return "<input type='checkbox' disabled='disabled'" + (value.booleanValue() ? " checked" : "") + " />";
  }

  @Override
  public Class<Boolean> getModelType()
  {
    return Boolean.class;
  }

  @Override
  public Class<String> getPresentationType()
  {
    return String.class;
  }
}

This will give you a native browser checkbox, however, not a Vaadin CheckBox.