Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Check/Uncheck all checkboxes
Hi everyone,
Can anyone help me with this? I am trying to figure out how to check or uncheck the all checkboxes.
Hi,
a solution could be implement a CustomField with a VerticalLayout without spacing containing a checkbox for "Check/Uncheck all" and an optiongroup for all other values. You can than add a valuechange listener on the first checkbox to set/unset the option group value.
Something like this
OptionGroup optionGroup = new OptionGroup(null, Arrays.asList(options));
optionGroup.setMultiSelect(true);
CheckBox all = new CheckBox("Check/Uncheck all", false);
all.addValueChangeListener(event -> {
if (all.getValue()) {
optionGroup.setValue(optionGroup.getItemIds());
} else {
optionGroup.setValue(null);
}
});
You can also add a valuechange listener to optiongroup to check/uncheck the checkbox to reflect the optiongroup state if you need it.
You can also simply extend VerticalLayout if you don't need a Field
HTH
Marco
Hi Marco,
Thanks for help. In fact, i have a Table with two columns and some rows.
Table checkboxTable = new Table();
checkboxTable.addContainerProperty("Filters", String.class, null);
for (int i = 0; i < 2; ++i) {
for (int j = 0; j < 5; ++j) {
Integer itemID = new Integer(j);
String head;
head = "FILTER" + String.valueOf(i);
checkboxTable.addContainerProperty(head, CheckBox.class, null);
CheckBox checkBox = new CheckBox("FILTER" + j);
checkboxTable.addItem(new Object[]{"Item" + j, checkBox }, itemID);
}
}
First checkbox check/uncheck all checkboxes. how to solve this problem? you have any idea for this? :D
I'm sorry, I'm not sure to have understood what's your goal; could you explain in more detail your needs?
BTW what about using a Grid with multi selection enabled instead of table?
Take a look at the sampler example .
Let me know if this is helpfull
Best regards
Marco
Here is a simple example in javascript.
https://jsfiddle.net/Luzm2jq3/
I would like to implement it in a table.
Can the "select all" checkbox be outside the table or must it also be inside a table row?
Hi,
you can try with something like this (not the better solution but it works)
Table checkboxTable = new Table();
// Some sample container properties
checkboxTable.getContainerDataSource().addContainerProperty("activeFilter", Boolean.class, false);
checkboxTable.getContainerDataSource().addContainerProperty("description", String.class, null);
// Generated column with checkbox; value bound to activeFilter property
checkboxTable.addGeneratedColumn("filterCheck", (source, itemId, columnId) ->
new CheckBox(null, source.getItem(itemId).getItemProperty("activeFilter")));
checkboxTable.setVisibleColumns("filterCheck", "description");
// Add some test items
IntConsumer itemAdder = i -> {
Item item = checkboxTable.addItem(i);
item.getItemProperty("activeFilter").setValue(false);
item.getItemProperty("description").setValue("Filter " + i);
};
IntStream.range(1, 4).forEach(itemAdder);
// Select all checkbox
// on value change retrieves all checkboxes in the table an set them value
CheckBox all = new CheckBox("Check/Uncheck all", false);
all.addValueChangeListener(event -> StreamSupport.stream(checkboxTable.spliterator(), false)
.filter(CheckBox.class::isInstance).map(CheckBox.class::cast)
.forEach(checkBox -> checkBox.setValue(all.getValue()))
);
layout.addComponents(all, checkboxTable);
HTH
Marco