TreeGrid - how to highlight the root element?

I have a TreeGrid, which is a multi-select one. The thing is, if all children under a root are selected, then the root element also shows the checkmark, making the selection obvious. But, if only some children are selected, the riot doesn’t have a checkmark or any form of identification for the user to know that some children under that root have been selected. I’d like to either highlight the root with background color or some such differentiating style to achieve. Tried using setClassNameGenerator, it only adds background to the selected item, which is a child. Any clues/examples how to get past??

This example applies a class name to child rows of a (single-select) TreeGrid when their parent is selected: https://cookbook.vaadin.com/treegrid-subtree-highlight ; you should be able to flip the logic to color the parent when one or more child items is selected.

That was the same example I was looking at, but if you look at the demo, you see how selecting, for ex. if I click Office (under HR), it highlights the selected row, but my requirement is it highlight the row HR as well.

Yes; you just need to rewrite this part:

       grid.setClassNameGenerator(
            department -> {
                if (
                    grid.asSingleSelect().getValue() != null &&
                    grid.asSingleSelect().getValue().equals(department.getParent())
                ) {
                    return "parent-selected";
                } else return null;
            }
        );

so that instead of checking that the selected item is the current item’s parent, as here: grid.asSingleSelect().getValue().equals(department.getParent()), you should check if the current item (department in the example) has any children that are a part of the selection.

Yes, tried all that, only to ultimately realize the setClassNameGenerator (as I implemented sort of like the example mentioned above) was not actually doing anything, coz ! don’t think the root is getting perused at all. And even without the setClassNameGenerator, the item I select gets a background color nonetheless.

Attaching a screenshot of the tree, as I have modified it. If you were to click on “test”, all children under it would get selected as well as test, obviously. But in the way I have currently selected (only 1 child), if the tree is not collapsed, one won’t know which child has been selected (as users will obviously have many root items and many children under each root. So, essentially, I just need to figure a way I can make the “test” distinctive, when at least 1 child is selected (as opposed to all when all children are selected).
18490039.png

If the lambda set in setClassNameGenerator is not invoked for root elements, that sounds like a fairly severe bug. Can you create a minimal example that reproduces this?

I’ll try to get that later tonight.

One q just arose, if I should hv the classNameGenerator inside the addSelectionListener of any other such place?? Coz, I see that the generator was hit when view initialized, but not after treegrid selections changed.

setClassNameGenerator shouldn’t be inside a selection listener or similar, no.

Hmm, then it was in the right place, but it doesn’t seem to get into that block at all after/while selections are being made in the