2

I love Vaadin Details component. But it looks like it is always pre-rendered. Is it possible to turn the Details component into the lazy-loading mode?

I'd like to render the Details content when user expands the panel. Is it possible to achieve with the Details component? If no, what may be used instead in order to implement such behavior?

Basil Bourque
  • 303,325
  • 100
  • 852
  • 1,154
alexanoid
  • 24,051
  • 54
  • 210
  • 410
  • Do you mean that you want to have the Details component closed by default? If so, call `.setOpened(false)` on the component. Or do you actually need to defer when the component gets added to the DOM? In most cases the first options is all you need, and a whole lot easier. – Marcus Hellberg Aug 19 '22 at 01:09
  • The second one. I'd like to execute the business logic and render the component only on component `open` event (when user would like to open it) – alexanoid Aug 19 '22 at 08:25

1 Answers1

9

Details doesn't support lazy loading of components, but you can use addOpenedChangeListener to get around this. Use a placeholder component like div as content and once the listener is triggered with open=true replace the div with the real component. Keep in mind that the user can open/close the details multiple times. You have to keep track if the user has already opened it / your content was rendered once, so that's not re-created.

Knoobie
  • 1,968
  • 10
  • 14
  • The issue is - that the content may vary between openings because of DB state.. So I have to rerender it each time it is opened.. How to properly remove previously generated components in such case? – alexanoid Aug 19 '22 at 09:27
  • 2
    You can just call setContent again, the old content gets removed automatically. – Knoobie Aug 19 '22 at 09:29
  • 3
    Inspired by this question, I created an example in https://cookbook.vaadin.com/lazy-details. If you want to refresh every time it's expanded, then you can remove the `isAttached()` check from the `if` – Leif Åstrand Aug 19 '22 at 17:03