TreeGrid scrollToItem feature in v25

Building on the TreeGrid improvements in v25, we are introducing the scrollToItem(T) API for TreeGrid. This feature gives TreeGrid users access to the same convenient scrolling capability that Grid already had, eliminating the need for manual index calculations when navigating to specific items. You can try it out with v25.0.0-beta2.

Why scrollToItem?

Previously, scrolling to a specific item in TreeGrid required using scrollToIndex(int...), which meant you had to manually resolve the index of each ancestor item.

Now, with scrollToItem, you can simply pass the item you want to scroll to, and TreeGrid handles the rest. Also, any collapsed ancestors of the target item are expanded before scrolling, unlike scrollToIndex.

// Before: Manual index calculation needed
treeGrid.scrollToIndex(2, 1, 3);

// Now: Just pass the item
treeGrid.scrollToItem(targetItem);

Implementation Requirements

The requirements for scrollToItem vary based on your data provider configuration. Here’s what you need to implement:

For TreeDataProvider

TreeDataProvider works out of the box with no additional implementation required:

TreeDataProvider<Person> dataProvider = new TreeDataProvider<>(treeData,
    HierarchyFormat.FLATTENED); // Also works for HierarchyFormat.NESTED
treeGrid.setDataProvider(dataProvider);

Person targetPerson = findPersonById("john-doe");
treeGrid.scrollToItem(targetPerson);

For Custom In-memory HierarchicalDataProviders

For custom in-memory data providers, you need to implement getParent(T):

class CustomDataProvider implements HierarchicalDataProvider<Department, Void> {

    @Override
    public Department getParent(Department item) {
        return departmentService.getParentDepartment(item);
    }
    
    @Override
    public boolean isInMemory() {
        return true;
    }

    // ...
}

For Other Custom HierarchicalDataProviders

You still need to implement getParent(T). Additionally, you need to implement getItemIndex(T, HierarchicalQuery):

class CustomDataProvider implements HierarchicalDataProvider<Department, Void> {
    
    @Override
    public Department getParent(Department item) {
        return departmentService.getParentDepartment(item);
    }
    
    @Override
    public boolean isInMemory() {
        return false;
    }
    
    @Override
    public int getItemIndex(Department item, 
            HierarchicalQuery<Department, Void> query) {
        List<Department> siblings = departmentService
            .getChildDepartments(query.getParent());
        return siblings.indexOf(item);
    }

    // ...
}

Error Handling

Unlike scrollToIndex, scrollToItem will throw a NoSuchElementException if the target item does not belong to the tree.

try {
    treeGrid.scrollToItem(item);
} catch (NoSuchElementException e) {
    Notification.show("Item not found: " + e.getMessage());
}

Also, if your data provider doesn’t implement the required methods, it will throw an UnsupportedOperationException with a message indicating which method needs implementation.

Migration Guide

If you’re upgrading existing TreeGrid implementations:

  1. Currently using TreeDataProvider: No changes needed - scrollToItem works immediately
  2. Currently using a custom HierarchicalDataProvider: Implement the required methods based on the table above
  3. Currently using scrollToIndex: Consider migrating to scrollToItem for cleaner code:
// Old approach
private void navigateToItem(T item) {
    List<Integer> indexes = new ArrayList<>();
    T current = item;
    while (current != null) {
        T parent = getParent(current);
        int index = getChildIndex(parent, current);
        indexes.add(0, index);
        current = parent;
    }
    treeGrid.scrollToIndex(indexes.toArray(new Integer[0]));
}

// New approach
private void navigateToItem(T item) {
    treeGrid.scrollToItem(item);
}

Combining with Flat Hierarchy Support

The scrollToItem feature works seamlessly with the new flat hierarchy support in v25. If you’re using HierarchyFormat.FLATTENED for better scrolling performance (as described in this post), scrollToItem will take advantage of the flattened structure.

Looking for Feedback

Give it a try and let us know what you think! We’re particularly interested in hearing about:

  • Whether your use cases are well-suited to scrollToItem and whether it improves your code
  • Performance with large datasets
  • Any edge cases or unexpected behaviors

I just recently discovered that we had gotten scrollToItem in Grid!
As you say, it makes the code a bit nicer.

However, I did feel it was a bit of a let-down, or at least it didn’t do what I’d like.

What I’d like is an “ensure this row is visible” function that doesn’t do anything if the row is visible. If it is below visible area, the grid is scrolled so it shows at the bottom. If it is above visible area, it is scrolled so that it shows at the top, possibly with some margin.

3 Likes

I agree, the users want a “stable” grid without unnecessary scrolling so is it possible to determine whether an item is visible or not?

1 Like

Thanks everyone for the feedback! We’ve updated the scrollToItem method so it won’t scroll when the item is already fully visible. This change will apply to both Grid and TreeGrid starting from Vaadin 25.0.0-rc1, which is already out for flow-components: Release Vaadin Flow Components V25.0.0-rc1 · vaadin/flow-components · GitHub.

Making it configurable where to show the item – at the top or bottom or nearest – would require introducing a new API, which involves more work and can’t make it into 25.0. That said, it sounds like a useful feature which could be considered for one of the future version. Thanks!

2 Likes