CODEWITHSUNDEEP
checkboxbooleanvaadin
Hink
Hink

Reputation: 1103

Vaadin table: How to display Boolean as checkboxes with editable=false

I'd like to see checkboxes in the table instead of "true" or "false" text. TableFieldFactory class generates fields only for editable cells. I found only formatProperty where I can return proper unicode character like this ☑, but it doesn't look well. Is there possible to generate own HTML element without creating computed properties?

Upvotes: 2

Views: 6092

Answers (3)

Cesar Quinteiro
Cesar Quinteiro

Reputation: 21

As complement of mstahv answer, a way to refresh checkBox field is using table.refreshRowCache();

table.addGeneratedColumn("propertyWithBoolean", new Table.ColumnGenerator() {

@Override
public Object generateCell(Table source, Object itemId,
        Object columnId) {
    Boolean checked = (Boolean) source.getItem(itemId).getItemProperty(columnId).getValue();
    CheckBox checkBox = new CheckBox();
    checkBox.setValue(checked);
    // don't allow user to change value
    checkBox.setEnabled(false);
    return checkBox;
}
});
void changeColumnValue(String field, String dato)
{
    item.getItemProperty(field).setValue(dato.equals("true"));
    table.refreshRowCache(); // To refresh the checkbox value in the table
}

Upvotes: 1

mstahv
mstahv

Reputation: 1934

The generated column approach, replaces the default "toString" with a component:

table.addGeneratedColumn("propertyWithBoolean", new Table.ColumnGenerator() {

    @Override
    public Object generateCell(Table source, Object itemId,
            Object columnId) {
        Boolean checked = (Boolean) source.getItem(itemId).getItemProperty(columnId).getValue();
        CheckBox checkBox = new CheckBox();
        checkBox.setValue(checked);
        // don't allow user to change value
        checkBox.setEnabled(false);
        return checkBox;
    }
});

Upvotes: 5

riddy
riddy

Reputation: 521

One solution would be to add a style generator to the Table, and solve this via css:

  setCellStyleGenerator(new CellStyleGenerator() {
            @Override
            public String getStyle(Table source, Object itemId, Object propertyId) {
                     if("myBooleanColumn".equals(propertyId){
                        return "true".equals(itemId) ? "checked-checkbox":"unchecked-checkbox";
                     }
                     return null;
            }
        });

then define your style:

.v-table-cell-content-unchecked-checkbox .v-table-cell-wrapper,
.v-table-cell-content-checked-checkbox .v-table-cell-wrapper{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


.v-table-cell-content-checked-checkbox .v-table-cell-wrapper{      
  background-image: url(".../checked-checkbox.png");
}
.v-table-cell-content-unchecked-checkbox .v-table-cell-wrapper{      
  background-image: url(".../unchecked-checkbox.png");
}

If you want the checkbox to be editable you can also set real Vaadin Checkboxes in your column. See Book of Vaadin for that.

Upvotes: 2

Related Questions