Check/Uncheck all checkboxes

Any one can help me?

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