How to display checkboxes instead of boolean in vaadin grid?

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

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.