VirtualList item selection / click listener

Hi all,

in a VirtualList, how can I register an item click listener, for example to display detailed info about the item?

(Sorry, this seems a very basic question and I’m wondering why I wasn’t able to find anything about this - probably I’m totally on a wrong path?!)

Any help would be greatly appreciated!

Regards

Marcus.

Like a ContextMenu ?

https://vaadin.com/docs/latest/components/context-menu

Not really … I don’t want a menu to show up, I simply want to show the selected item in a detail view.

This is such a basic operation I cannot imagine there is no standard solution for it, but obviously I’m totally blind.

You can’t find such a thing because VirtualList does not provide such things at the moment. Your use case sounds like the typical one-column Grid.

Maybe this can give you an idea.
Each div you are going to include corresponds to a specific item, and each one will have its own listener.

VirtualList<String> list = new VirtualList<>();
list.setItems("item1","item2", "item3","item4");
list.setRenderer(renderer());
super.add(list);
public static ComponentRenderer<Div, String> renderer() {
   final SerializableBiConsumer<Div, String> items = (div, item) -> {
       div.addClickListener(event -> {
           Notification.show("Hello " + item);
       });
       div.add(new Span("Hello  " + item));
    };
    return new ComponentRenderer<>(Div::new, items);
}

And using details maybe

public static ComponentRenderer<Div, String> renderer() {
    final SerializableBiConsumer<Div, String> items = (div, item) -> {
        div.addClickListener(event -> {
            Notification.show("Hello " + item);
        });
        final Details details = new Details();
        details.add(new Span("Hello: " + item));
        div.add(details);
    };
    return new ComponentRenderer<>(Div::new, items);
}

Hi Christian,

that can’t be true! I’ve been into IT for decades now, but it seems to be my very destiny immediately after I’ve finished the tutorial of something new the first thing I do is stepping into something that isn’t (yet) implemented …

I was impressed how easily a big record set can be displayed with VirtualList, but probably you are right and I have to look into the Grid.

Thank you!

Wow, this works! Tried it and it worked immediately, thank you!

But do I have to worry about memory leaks with this? Adding a listener to each displayed row of the List, will that clog up at some point?

I understand that if we add many components to render in that way it can affect the performance, but the VirtualList I think is designed for a good performance, just try and let us know.

If you are going to add a lot of items, let me know how it works, I’m interested…

You can use a JVM memory monitoring tool such as JVisualVM for example.

VirtualList selection API and list/listbox semantics · Issue #6838 · vaadin/platform · GitHub ;)

I don’t think so. The click listener does not prevent the row component from being garbage collected and the click listener will be garbage collected as the same time as the row component since your application code doesn’t store a reference in any other place.

The click listener does slightly increase the total memory use of each row component but that’s still little enough to easily remain within the same order of magnitude.

1 Like