TreeGrid with Auto scroll with large amount of data

Flow
1

Vaadin version: 22
we are using TreeGrid and have implemented lazy loading with AbstractHierarchicalDataProvider<Item, Void>. Our TreeGrid contains 3,000 records with multilevel Hierarchical. If I want to add one or more records, the new records should be added at the bottom of the TreeGrid Hierarchical. the newly added item should be automatically selected and the view should scroll down to that particular item.
How can we achieve this?

2

I would be tempted to suggest using TreeTable component from the Viritin add-on instead of TreeGrid. But that is for Vaadin 24…

3

Hi @Matti , thank you for your reply. Is there an alternative option to achieve this?

4

You could try copying the class directy to your project. I haven’t investigated if there are big changes with the web component it is based on. If not, it might work in Vaadin 22 with pretty minimalistic changes.

But I’d really suggest to check to get rid of that Vaadin 22 (and Java 8 :thinking:), looks like its commercial support is ending in couple of days.

5

Hi @Matti,
We are using TreeGrid and We’ve implemented AbstractHierarchicalDataProvider<Items, Void> and have 10k data at both the root and child levels. In the public Stream<Items> fetchChildren(HierarchicalQuery<Items, Void> query) method, by default, it loads 50 records. On the UI side, it displays the first 50 records, and upon scrolling down, it shows the next 50 records, and so forth. Is there a way to load all the data and display it on the UI side?

6

Don’t use lazy loading if you don’t want lazy loading. Just pass a list with objects to your grid.

Note: if your goal is to allow people to use Control + S to find something; forget it - all rows are never rendered because of performance.

1 Like
7

Hi @knoobie,
Thanks for your reply.
How we can manage we have root/child/child of child,
Is there any example, Demo code

8 
TreeGrid<Item> treeGrid = new TreeGrid<Item>();
treeGrid.setItems(rootItems, this::getChildrenOfItem);
9

Hi @knoobie
How can we achieve auto-scroll while still selecting the item in Lazy loading?

scenario:
We’ve implemented lazy loading with 10k records at the root, child, and child-of-child levels. When I add a new record to a specific root or child, it should be automatically selected and the view should scroll to the added/selected record.

10

My suggestion would be: don’t.

theoretically it could be possible with: flow-components/vaadin-grid-flow-parent/vaadin-grid-flow/src/main/java/com/vaadin/flow/component/treegrid/TreeGrid.java at b5a37d4b6b4c726b6b822eebbd5044254768532d · vaadin/flow-components · GitHub