Client-side exception thrown when hiding column, add item, and refresh data provider about vaadin-grid

[tomivirkki]

Tried with the following on Vaadin 14.4.8:

List<Person> items = new ArrayList<>();

// 1. instantiate grid and columns
Grid<Person> grid;
grid = new Grid<>();
grid.addColumn(item -> items.indexOf(item) + 1).setHeader("#");
grid.addColumn(Person::getEmail).setHeader("A").setKey("TEST");
grid.addColumn(Person::getFirstName).setHeader("B");
grid.addColumn(Person::getLastName).setHeader("C");

items.add(new Person(100, "Lucas", "Kane", 68, new Address("12080", "Washington"), "127-942-237"));
grid.setItems(items);

// 2. hide column
grid.getColumnByKey("TEST").setVisible(false);

// 3. add item to list
items.add(new Person(101, "Foo", "Bar", 53, new Address("12080", "Washington"), "127-942-237"));

// 4. refresh data provider
grid.getDataProvider().refreshAll();

add(grid);

Works as expected:

Please provide an example project that the issue can be reproduced with.

[drewharvey]

Maybe the issue is when each step is broken down into actions from the user. In a fresh project, the following is giving me the exception. When you run the project, as a user on the UI, click the buttons from top to bottom. After the last button you will see the exception.

package org.vaadin.spring.tutorial;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

import java.util.ArrayList;
import java.util.List;

@Route
public class MainView extends VerticalLayout { // implements LocaleChangeObserver {

    private Button btn1;
    private Button btn2;
    private Button btn3;
    private Grid<Person> grid;
    private List<Person> items = new ArrayList<>();

    public MainView() {
        btn1 = new Button("1. Add record", event -> {
            addRecord();
            btn1.setEnabled(false);
            btn2.setEnabled(true);
            btn3.setEnabled(false);
        });

        btn2 = new Button("2. Hide column 'A'", event -> {
            grid.getColumnByKey("TEST").setVisible(false);
            btn1.setEnabled(false);
            btn2.setEnabled(false);
            btn3.setEnabled(true);
        });
        btn2.setEnabled(false);

        btn3 = new Button("3. Add record", event -> addRecord());
        btn3.setEnabled(false);
        
        grid = new Grid<>();
        grid.addColumn(item -> items.indexOf(item)+1).setHeader("#");
        grid.addColumn(Person::getFirstName).setHeader("A").setKey("TEST");
        grid.addColumn(Person::getLastName).setHeader("B");
        grid.addColumn(Person::getHaircut).setHeader("C");
        grid.setItems(items);

        add(btn1, btn2, btn3, grid);
    }

    private void addRecord() {
        items.add(new Person("ted", "johnson", "bowlcut"));
        grid.getDataProvider().refreshAll();
    }

    public class Person {
        private String firstName;
        private String lastName;
        private String haircut;

        public Person(String firstName, String lastName, String haircut) {
            this.firstName = firstName;
            this.lastName = lastName;
            this.haircut = haircut;
        }

        public String getFirstName() {
            return firstName;
        }

        public void setFirstName(String firstName) {
            this.firstName = firstName;
        }

        public String getLastName() {
            return lastName;
        }

        public void setLastName(String lastName) {
            this.lastName = lastName;
        }

        public String getHaircut() {
            return haircut;
        }

        public void setHaircut(String haircut) {
            this.haircut = haircut;
        }
    }

}

[arenk]

@sosa-vaadin I have a similar issue with _setFooterTemplateOrRenderer.

More precisely: I'm getting a client-side exception when doing the following sequence: instantiate grid with a footer row, hide a column, update some grid properties (incl. text in the footer row of active columns), and then call refreshAll on the data provider.

An easy fix probably would be to add the same additional check as in #2144 && !this.hidden to _setFooterTemplateOrRenderer in vaadin-grid-column.js

[sosa-vaadin]

@arenk Please open a ticket in https://www.github.com/vaadin/web-components so it will get done. After that, you can open a PR yourself and we'll take a look at it.