Grid ComponentRenderer issue with Button clickListeners within

Flow
1

Vaadin version: 12.0.3

In my Grid I add a column with buttons for editing the row. There is an edit button and a save button. The save button is initially hidden, and when the edit button is clicked, I want to (edit the item and) hide the edit button and show the save button.

However, when the edit button is clicked the following happens:
The row does go into edit mode, all defined EditorComponents show up.
The Edit button does not hide, and the save button does not show.
There is no error or exception in console or server log.

// edit row btns
grid.addColumn(new ComponentRenderer<>(item -> {
    Button editBtn = new Button("Edit", VaadinIcon.EDIT.create());
    Button saveBtn = new Button("Save Edits", VaadinIcon.DATABASE.create());
    editBtn.addClickListener(click -> {
        saveBtn.setVisible(true);
        editBtn.setVisible(false);
        grid.getEditor().editItem(item);
    });
    saveBtn.addClickListener(click -> {
        saveBtn.setVisible(false);
        editBtn.setVisible(true);
        grid.getEditor().save();
    });

    editBtn.setWidth("100%");
    saveBtn.setWidth("100%");
    saveBtn.setVisible(false);

    HorizontalLayout editLayout = new HorizontalLayout(editBtn, saveBtn);
    editLayout.setWidth("100%");
    return editLayout;
}))
        .setKey("edit")
        .setHeader("Edit")
        .setFlexGrow(0)
        .setWidth("300px")
        .setId("edit");

What is happening there, and how can I fix it?

2

please?

3

This is interesting finding. Are you using Push? I am guessing that for some reason the changes are not being pushed to UI.

4

No push is not used here. I have not yet encountered similar problems with button click listeners, in other cases it updates the UI just fine. I will test the very same editLayout outside of a componenRenderer next monday and will update here what I find out.

5

As I thought, when I place this exact code (without the grid edit and save lines) in any layout outside of a grid (no ComonentRenderer), the hiding and showing of the two buttons works flawlessly.

I have now also tried commenting out these lines in the button clickListeners:

//grid.getEditor().editItem(item);  
...
//grid.getEditor().save();

And now it works! So the cause was not the ComponentRenderer but the grid editor. There seems to be something wrong with the editor - not only with the [saveListener]
(https://vaadin.com/forum/thread/17165917/17487653) but now also with the grid.editItem().

Am I missing critical information about the grid editor? Is there a working example of a flow grid with an editor?

6

I was made aware that there are in fact working code examples of the grid editor: [https://vaadin.com/components/vaadin-grid/java-examples/grid-editor]
(https://vaadin.com/components/vaadin-grid/java-examples/grid-editor)

I was able to make the editor work perfectly using this code sample.

The biggest difference between my approach above and the one that was used in the code sample is that the save and cancel buttons are defined as the editorComponent of the edit column, therefore there is no manual hiding / showing of the buttons necessary