V24: How to put an outline around a gridview selected item?

Flow
1

I’m setting up a selection listener as such:

jobApplicationGrid.addSelectionListener(event → {
event.getFirstSelectedItem().ifPresent(application → {
// Apply blue outline CSS class to the selected row
jobApplicationGrid.getElement().getStyle()
.set(“–selected-row-outlined”, “2px solid blue”);
});
});

I don’t see the outline.

Also, how to deselect the previous row and remove the outline for the previous row?

Thanks!

2

Just a question: why are you re-inventing SelectionMode.SINGLE of the grid? It does exactly what you want out of the box… row highlighted and de-selection of the old value.

1 Like
3

You do not need to setup listeners, it should work with using only css. Something like this:

html {
    --selected-row-border: 2px solid red;
}

vaadin-grid::part(selected-row-cell) {
    border-top: var(--selected-row-border);
    border-bottom: var(--selected-row-border);
}

vaadin-grid::part(selected-row-cell first-column-cell) {
    border-left: var(--selected-row-border);
}
vaadin-grid::part(selected-row-cell last-column-cell) {
    border-right: var(--selected-row-border);
}

Results in

image
image822×142 11.7 KB

Note: setting the border for the ::part(selected-row) (which is the tr element) is not enough, since the visuals break with very wide grids.