Vaadin 8.4.0 Grid缓冲保存后实现保存确认模态框咨询

Alright, let's work through this Vaadin 8.4.0 Grid problem you're stuck on. You're using a Grid with direct items (not a Data Provider), running in buffered mode, and want a confirmation modal to pop up before saving changes—but since Vaadin removed the saveEditor() method, your custom extended Grid is almost there but still has kinks. Here's how to get this working smoothly:

First, let's adjust your extended Grid to handle the editor buffer correctly. Since saveEditor() was removed, we need to manually manage buffer state and trigger the confirmation before applying changes. Here's a polished version of your custom Grid class (fill in the missing parts with your specific item type):

public class ConfirmationGrid<T> extends Grid<T> {
    private Dialog confirmationDialog;

    public ConfirmationGrid() {
        super();
        initConfirmationDialog();
    }

    private void initConfirmationDialog() {
        confirmationDialog = new Dialog();
        confirmationDialog.setCaption("Confirm Save");
        confirmationDialog.setWidth("400px");

        // Add content to show pending changes
        Label changePrompt = new Label("Are you sure you want to save these changes?");
        // Optional: Add a detailed view of modified fields here (e.g., FormLayout with updated values)

        Button saveBtn = new Button("Save", event -> {
            if (getEditor().isOpen()) {
                T editedItem = getEditor().getItem();
                // Push buffered editor values to the actual item (critical for direct items setup)
                try {
                    getEditor().getBinder().writeBean(editedItem);
                    getEditor().close();
                } catch (ValidationException e) {
                    // Handle validation errors here—maybe show a message in the dialog
                    Notification.show("Invalid input: " + e.getMessage(), Notification.Type.ERROR_MESSAGE);
                    return;
                }
            }
            confirmationDialog.close();
            // Refresh the Grid to reflect changes
            getDataProvider().refreshAll();
        });

        Button cancelBtn = new Button("Cancel", event -> {
            getEditor().discard(); // Reset buffer to original values
            confirmationDialog.close();
        });

        HorizontalLayout buttonRow = new HorizontalLayout(saveBtn, cancelBtn);
        buttonRow.setSpacing(true);

        confirmationDialog.addComponents(changePrompt, buttonRow);
    }

    // Override the editor creation to hook into the save button
    @Override
    protected Editor createEditor() {
        Editor<T> editor = super.createEditor();
        // Replace the default save button's behavior with our confirmation
        editor.getSaveButton().addClickListener(event -> {
            event.preventDefault(); // Stop the default (now removed) save logic
            confirmationDialog.open();
        });
        return editor;
    }
}

• Manual Buffer Sync: Since you're using direct items instead of a Data Provider, the editor's buffered changes won't auto-apply to your items. The writeBean() call pushes those buffered values to the actual item in your list.
• Prevent Default Behavior: Calling event.preventDefault() on the default save button click stops the old (removed) saveEditor() logic from running, letting our confirmation flow take over.
• Validation Handling: Added a try/catch around writeBean() to handle validation errors—you can customize this to show specific feedback in the dialog or as a notification.
• Clean Cancel Flow: The cancel button calls getEditor().discard() to reset the buffer back to the item's original values before closing the dialog.

Make sure you enable buffered mode explicitly when initializing your Grid:

ConfirmationGrid<YourCustomItem> grid = new ConfirmationGrid<>();
grid.getEditor().setBuffered(true);
// Configure your columns, binder, and item list as usual
grid.setItems(yourItemCollection);

• Changes Not Showing Up: If the Grid doesn't update after saving, call getDataProvider().refreshItem(editedItem) instead of refreshAll() for a more targeted update.
• Dialog Not Opening: Double-check that you're not overriding the save button listener elsewhere in your code—our override needs to be the final one applied.
• Binder Configuration: Ensure your editor's binder is properly bound to your item's fields; otherwise, writeBean() won't push changes correctly.

内容的提问来源于stack exchange，提问作者Piritz