Diselect a row in a vaadin grid vaadin 8

I have a Vaadin 8 Grid component.

Grid<ErweitertePdbSegmentInkassoTyp> inkassoGrid = new Grid<>();
inkassoGrid.setSelectionMod(SelectionMode.SINGLE);

and I have a listener when I select a row in this grid

inkassoGrid.addItemClickListener(event -> {
    event.getItem();
});

In the event.getItem(); I have the selected row. Unfortunetly when I want to deselect the row I still have the selected row in the event.getItem(). Can anyone help me how to know if the selected row is not anymore selected?

Solution

Using Vaadin 8.5.1 and this question as a start-up point, you can use a selection listener for what you want:

when the user selects a contact a form displaying the details is shown.
when the contact is changed the displayed details are updated
when no contact is selected, the form is hidden

The magic happens in the createGrid method, more specifically in the value change listener:

    contactGrid.asSingleSelect().addValueChangeListener(event -> {
        // show or hide the form depending on the selection
        contactForm.setVisible(event.getValue() != null);
        // update displayed data
        contactForm.setClient(event.getValue());
    });

Full code:

import com.vaadin.data.Binder;
import com.vaadin.ui.*;
import com.vaadin.ui.themes.ValoTheme;

import java.util.Arrays;
import java.util.List;

public class GridWithDetailsForm extends HorizontalLayout {
    /**
     * Simulate some data
     */
    private List<Client> clients = Arrays.asList(
            new Client("Sernie", "A", "123 Test St.", "test@gmail.gov", "555-555-5554"),
            new Client("Ernie", "B", "123 Test St.", "test@gmail.com", "555-555-5555"),
            new Client("Bernie", "C", "123 Test St.", "test@gmail.net", "555-555-5556"),
            new Client("Ayy", "Lmao", "123 Test St.", "test@gmail.org", "555-555-5557"),
            new Client("Dax", "E", "123 Test St.", "test@gmail.net", "555-555-5558"),
            new Client("Avorion", "F", "123 Test St.", "test@gmail.net", "555-555-5559"),
            new Client("Xanion", "G", "123 Test St.", "test@gmail.net", "555-555-5560"),
            new Client("Trinium", "H", "123 Test St.", "test@gmail.net", "555-555-5561"),
            new Client("Naonite", "I", "123 Test St.", "test@gmail.net", "555-555-5562"),
            new Client("Squillium", "J", "123 Test St.", "test@gmail.net", "555-555-5563"),
            new Client("Picard", "K", "123 Test St.", "test@gmail.net", "555-555-5564"),
            new Client("Richard", "L", "123 Test St.", "test@gmail.net", "555-555-5565"),
            new Client("Rickard", "M", "123 Test St.", "test@gmail.net", "555-555-5566"),
            new Client("Bobby", "N", "123 Test St.", "test@gmail.net", "555-555-5567"),
            new Client("Bob", "O", "123 Test St.", "test@gmail.net", "555-555-5568"),
            new Client("Ron", "P", "123 Test St.", "test@gmail.net", "555-555-5569"),
            new Client("Bill", "Q", "123 Test St.", "test@gmail.net", "555-555-5570"),
            new Client("Greg", "R", "123 Test St.", "test@gmail.net", "555-555-5571"),
            new Client("Juan", "S", "123 Test St.", "test@gmail.net", "555-555-5572"),
            new Client("Squidward", "T", "123 Test St.", "test@gmail.net", "555-555-5573"));


    public GridWithDetailsForm() {
        ContactForm contactForm = createContactForm();
        VerticalLayout actionBarAndGrid = createActionBarAndGrid(contactForm);
        addComponents(actionBarAndGrid, contactForm);
    }

    private VerticalLayout createActionBarAndGrid(ContactForm contactForm) {
        HorizontalLayout actionBar = createTopBar(contactForm);
        Grid<Client> contactGrid = createGrid(contactForm);

        VerticalLayout actionBadAndGrid = new VerticalLayout(actionBar, contactGrid);
        actionBadAndGrid.setSizeFull();
        actionBadAndGrid.setExpandRatio(contactGrid, 1);
        return actionBadAndGrid;
    }

    private ContactForm createContactForm() {
        ContactForm contactForm = new ContactForm();
        contactForm.setVisible(false);
        return contactForm;
    }

    private HorizontalLayout createTopBar(ContactForm contactForm) {
        TextField filter = new TextField();
        filter.setPlaceholder("Search clients...");

        Button addContactButton = new Button("New Client");
        addContactButton.addStyleName(ValoTheme.BUTTON_PRIMARY);
        addContactButton.addClickListener(event -> {
            contactForm.setVisible(true);
            contactForm.setClient(new Client());
        });

        HorizontalLayout actionBar = new HorizontalLayout(filter, addContactButton);
        actionBar.setWidth("100%");
        filter.setWidth("100%");
        actionBar.setExpandRatio(filter, 1);
        return actionBar;
    }

    private Grid<Client> createGrid(ContactForm contactForm) {
        Grid<Client> contactGrid = new Grid<>(Client.class);
        contactGrid.setSelectionMode(Grid.SelectionMode.SINGLE);
        contactGrid.setColumns("firstName", "lastName");
        contactGrid.setItems(clients);

        contactGrid.asSingleSelect().addValueChangeListener(event -> {
            // show or hide the form depending on the selection
            contactForm.setVisible(event.getValue() != null);
            // update displayed data
            contactForm.setClient(event.getValue());
        });
        return contactGrid;
    }

    /**
     * Contact details form
     */
    public static class ContactForm extends FormLayout {
        private Button save, delete, cancel;
        private TextField firstName, lastName, email, address, phoneNumber;
        private Binder<Client> binder = new Binder<>(Client.class);

        public ContactForm() {
            save = new Button("Save");
            delete = new Button("Delete");
            cancel = new Button("Cancel");

            firstName = new TextField();
            firstName.setPlaceholder("First Name");

            lastName = new TextField();
            lastName.setPlaceholder("Last Name");

            email = new TextField();
            email.setPlaceholder("Email Address");

            address = new TextField();
            address.setPlaceholder("Address");

            phoneNumber = new TextField();
            phoneNumber.setPlaceholder("Phone Number");

            HorizontalLayout actions = new HorizontalLayout(save, delete, cancel);
            actions.setSpacing(true);

            addComponents(actions, firstName, lastName, email, address, phoneNumber);
            setSizeUndefined();
            binder.bindInstanceFields(this);
        }

        public void setClient(Client client) {
            binder.setBean(client);
        }
    }

    public static class Client {
        private String firstName;
        private String lastName;
        private String address;
        private String email;
        private String phoneNumber;

        public Client(String firstName, String lastName, String address, String email, String phoneNumber) {
            this.firstName = firstName;
            this.lastName = lastName;
            this.address = address;
            this.email = email;
            this.phoneNumber = phoneNumber;
        }

        public Client() {

        }

        public String getFirstName() {
            return firstName;
        }

        public String getLastName() {
            return lastName;
        }

        public String getAddress() {
            return address;
        }

        public String getEmail() {
            return email;
        }

        public String getPhoneNumber() {
            return phoneNumber;
        }
    }
}

Result: