Highlighting recently edited row

Flow
1

I want to highlight the recently edited row with a different background color instead of the default select color. I tried something like this grid.addSelectionListener(selectionEvent -> selectionEvent.getFirstSelectedItem().ifPresent(unit -> { editedUnit.ifPresent(unit1 -> { grid.setPartNameGenerator(unit2 -> unit.equals(unit1) && unit2.equals(unit1) ? "recently-edited-row" : null); }); })); but I’m still seeing the default. I checked the dev tools and I do not see the recently-edited-row there
image.png

2

You need some bookkeeping for that. See example here:

That app is Vaadin 8, thus some API differences. So grid.setPartNameGenerator in your approach is correct.

When you save / update item, you need to remember the last edited item vaadin-create23/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/crud/BookGrid.java at master · TatuLund/vaadin-create23 · GitHub

3

Though all conditions are met here, the style is still not getting applied

4 
            log.info("Selected item is {}", unit);
            editedUnit.ifPresent(unit1 -> {
                log.info("Edited item is {}", unit1);
                grid.setPartNameGenerator(unit2 -> {
                    if (unit.getId().equals(unit1.getId())
                            && unit1.getId().equals(unit2.getId())) {
                        log.info("Applying style to unit {}", unit2);
                        return  "recently-edited-row" ;
                    }
                    return null;
                });
            });
        }));```
5

image.png

6

From the above log statements, it should apply the style as per my understanding

7 
vaadin-grid.styling::part(recently-edited-row) {
    background-color: lightblue; /* Customize the background color as needed */
    transition: background-color 0.5s; /* Add a smooth transition effect */
}```
8

But, no change to the edited row

9

So, first of all you’re using the generator in a really weird way there, re-setting it each time an item is edited.

I think it would make much more sense to define the generator once based on a variable like lastEditedItem like what I’m doing here:

            if (p.equals(lastModifiedPerson)) {
                return "last-modified";
            } else {
                return null;
            }
        });

and then in the clicklistener update the variable.

But you also need to tell the Grid to refresh those items, e.g. like so:

            Person prevPerson = lastModifiedPerson;
            lastModifiedPerson = e.getItem();
            g.getDataProvider().refreshItem(lastModifiedPerson);
            g.getDataProvider().refreshItem(prevPerson);
        });
10

I removed those old code and here is the updated code I’ve grid.setPartNameGenerator(unit -> { if (editedUnit.isPresent() && unit.getId().equals(editedUnit.get().getId())) { log.info("Applying style to unit {}", unit); return "recently-edited-row" ; } return null; });

11

and when ever I update the row, I call this method private void highlightEditedUnit(Unit unit) { editedUnit = Optional.ofNullable(unit); refreshGrid(editedUnit.get()); }

12

the values are getting refreshed but row looks same. No styling applied

13

Able to see this also in the console

14

Applying style to unit Unit(id = 14, version = 1, unitName = sadasdasdfdsdfsdf, shortName = qweqwe77)

15

I tried a simple stuff to verify whether any issues with applying in styles

16 
            if (unit.getId().equals(14L)) {
                log.info("Applying style to unit {}", unit);
//                return null;
                return "high-rating";
            }
            return "low-rating";
//            return  "recently-edited-row" ;

        });```
17 
    background-color: var(--lumo-success-color-10pct);
}

vaadin-grid.styling::part(low-rating) {
    background-color: var(--lumo-error-color-10pct);
}```
18

still, no changes

19

image.png

20

Just a random guess. Could it be a typo in the CSS class name you applied to the grid (styling)?