vaadin8.1.0 Grid with Checkbox had an Issue

Question

I am working with vaadin 8.1.0 grid. I need to insert checkbox as a column and also as column header. when I click checkbox in column header, all column checkbox should be checked. That is working fine. But the problem is if I have 100 rows, when I Check header checkbox only some column checkboxes are checked i.e, only the rows that are displayed. When I scrolldown the remaining rows checkboxes are not checked. Here is my code:

    List<Person> people = new ArrayList();
         for (int i = 0; i < 1000; i++) {
          people.add(i, new Person("Galileo Galilei", 1564));
        }

    CheckBox CheckBox1 = new CheckBox("All");
    CheckBox1.setValue(false);

        Grid<Person> grid = new Grid<>();
        grid.setItems( people);
        grid.addColumn(Person::getName).setCaption("Name");
        grid.addColumn(Person::getYear).setCaption("Year of birth").setId("1");

        grid.addComponentColumn(Person -> {
            CheckBox chk=new CheckBox("Chk 2");
            CheckBox1.addValueChangeListener(e->
            chk.setValue(CheckBox1.getValue())
            );
            return chk; 
        }).setCaption("ch2").setId("CH2");

        grid.getHeaderRow(0).getCell("CH2").setComponent( CheckBox1);

Answer 1

Well, for performance reasons, not all of the checkboxes are rendered from the start, as you'll see in the GIF below (right side, items flashing in violet), just the ones currently visible. And when you scroll, new items will be replacing the old ones, and checkboxes will be drawn for them. However their initial state will be uncheked, so the simplest solution is to set its initial state to the one of the master checkbox: CheckBox chk = new CheckBox("Chk 2", CheckBox1.getValue());.

Result:

Furthermore, looking at the code you might have a minor leak. Since the checkboxes are drawn each time you scroll a larger section, the code in grid.addComponentColumn will be called each time, and value change listeners will be added to the list on and on and on... because they're never unregistered. Take a look at the image below, after a few scrolls, I ended up with over 9000 of them:

To overcome this, you can un-register the listeners when the checkboxes are detached:

grid.addComponentColumn(Person -> {
     CheckBox chk = new CheckBox("Chk 2", CheckBox1.getValue());
     // save the registration info to unregister at a later time
     Registration listenerRegistration = CheckBox1.addValueChangeListener(e -> chk.setValue(CheckBox1.getValue()));
     // when the checkbox is detached, remove the listener
     chk.addDetachListener(event -> listenerRegistration.remove());
     return chk;
 }).setCaption("ch2").setId("CH2");

Now the list contains just those who were not yet detached: