From 420103668abfce5e25f9aef620b81e193fc258d2 Mon Sep 17 00:00:00 2001 From: ugur-vaadin Date: Wed, 15 Oct 2025 13:56:16 +0300 Subject: [PATCH 1/5] docs: add tree grid scroll to item section --- articles/components/tree-grid/index.adoc | 29 ++++++++- .../component/tree-grid/tree-grid-imports.ts | 5 ++ frontend/demo/init-flow-components.ts | 1 + .../treegrid/TreeGridScrollToItem.java | 61 +++++++++++++++++++ .../com/vaadin/demo/domain/DataService.java | 2 +- 5 files changed, 95 insertions(+), 3 deletions(-) create mode 100644 frontend/demo/component/tree-grid/tree-grid-imports.ts create mode 100644 src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollToItem.java diff --git a/articles/components/tree-grid/index.adoc b/articles/components/tree-grid/index.adoc index 5788117f2f..6e79df584c 100644 --- a/articles/components/tree-grid/index.adoc +++ b/articles/components/tree-grid/index.adoc @@ -123,9 +123,34 @@ endif::[] == Programmatic Scrolling -Grid supports programmatic navigation to a specific row. This is particularly useful when dealing with large data sets. It saves users from having to scroll through potentially hundreds or thousands of rows. +Tree Grid supports programmatic navigation to a specific item. This is particularly useful when dealing with large data sets. It saves users from having to scroll through potentially hundreds or thousands of rows. -To use this feature, you need to specify the index of the row you want to view. The scroll position of the grid will then be adjusted to bring that row into view. +[role="since:com.vaadin:vaadin@V25.0"] +=== Scrolling to an Item (Flow only) +To use this feature, you need to specify the item you want to view. The scroll position of the grid is adjusted to bring that item into view. + +If the item has collapsed parents, they expand before scrolling to the item. + +[.example] +-- +[source,typescript] +---- +include::{root}/frontend/demo/component/tree-grid/tree-grid-imports.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollToItem.java[render,tags=snippet,indent=0] +---- +-- + +`TreeDataProvider` supports this feature out of the box. For other data providers, you will need to implement [methodname]#getParent(T item)# and [methodname]#getItemIndex(T item, HierarchicalQuery query)#. + +=== Scrolling to an Item by Path + +To use this feature, you need to specify the path of the item you want to view. The scroll position of the grid is adjusted to bring that item into view. + +In contrast to scrolling to an item, possible collapsed parents of the item do not expand before scrolling. With multiple levels of hierarchy, you need to specify the row index for each level, separately. For example, to scroll to the second child-row (index 1) of the third root-level row (index 2), you would provide the indexes 2, 1. diff --git a/frontend/demo/component/tree-grid/tree-grid-imports.ts b/frontend/demo/component/tree-grid/tree-grid-imports.ts new file mode 100644 index 0000000000..2effb98775 --- /dev/null +++ b/frontend/demo/component/tree-grid/tree-grid-imports.ts @@ -0,0 +1,5 @@ +import 'Frontend/demo/init'; +import '@vaadin/grid'; +import '@vaadin/select'; + +// This file only has the required imports for the Java-only example diff --git a/frontend/demo/init-flow-components.ts b/frontend/demo/init-flow-components.ts index e67788fb9e..7cbe46d1ff 100644 --- a/frontend/demo/init-flow-components.ts +++ b/frontend/demo/init-flow-components.ts @@ -17,6 +17,7 @@ import '@vaadin/flow-frontend/contextMenuTargetConnector.js'; import '@vaadin/flow-frontend/datepickerConnector.js'; import '@vaadin/flow-frontend/disableOnClickFunctions.js'; import '@vaadin/flow-frontend/gridConnector.js'; +import '@vaadin/flow-frontend/treeGridConnector.js'; import '@vaadin/flow-frontend/vaadin-grid-flow-selection-column.js'; import '@vaadin/flow-frontend/gridProConnector.js'; import '@vaadin/flow-frontend/vaadin-map/mapConnector.js'; diff --git a/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollToItem.java b/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollToItem.java new file mode 100644 index 0000000000..d614fe0400 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollToItem.java @@ -0,0 +1,61 @@ +package com.vaadin.demo.component.treegrid; + +import com.vaadin.demo.DemoExporter; // hidden-source-line +import com.vaadin.demo.domain.DataService; +import com.vaadin.demo.domain.Person; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.treegrid.TreeGrid; +import com.vaadin.flow.data.provider.hierarchy.TreeData; +import com.vaadin.flow.data.provider.hierarchy.TreeDataProvider; +import com.vaadin.flow.router.Route; + +import java.util.ArrayList; + +@Route("tree-grid-scroll-to-item") +public class TreeGridScrollToItem extends Div { + private final TreeGrid treeGrid = new TreeGrid<>(); + + public TreeGridScrollToItem() { + var treeData = new TreeData(); + treeData.addItems(DataService.getManagers(), + manager -> DataService.getPeople(manager.getId())); + treeGrid.setDataProvider(new TreeDataProvider<>(treeData)); + treeGrid.addHierarchyColumn(Person::getFullName).setWidth("300px") + .setFlexGrow(0).setHeader("Full name"); + treeGrid.addColumn(Person::getEmail).setHeader("Email"); + + add(treeGrid); + + var scrollToItem = new Select(); + scrollToItem.setLabel("Scroll to item"); + scrollToItem.setItemLabelGenerator(Person::getFullName); + scrollToItem.setItems(getItemsToScrollTo()); + scrollToItem.setWidth("200px"); + scrollToItem.addValueChangeListener( + event -> { + var item = event.getValue(); + // tag::snippet[] + treeGrid.scrollToItem(item); + // end::snippet[] + }); + add(scrollToItem); + } + + private ArrayList getItemsToScrollTo() { + var itemsToScrollTo = new ArrayList(); + var managers = DataService.getManagers(); + var middleRootItem = managers.get(managers.size() / 2); + itemsToScrollTo.add(middleRootItem); + var children = DataService.getPeople(middleRootItem.getId()); + while (!children.isEmpty()) { + var middleChild = children.get(children.size() / 2); + itemsToScrollTo.add(middleChild); + children = DataService.getPeople(middleChild.getId()); + } + return itemsToScrollTo; + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} diff --git a/src/main/java/com/vaadin/demo/domain/DataService.java b/src/main/java/com/vaadin/demo/domain/DataService.java index 316de313e3..4622948ff3 100644 --- a/src/main/java/com/vaadin/demo/domain/DataService.java +++ b/src/main/java/com/vaadin/demo/domain/DataService.java @@ -5,7 +5,7 @@ import java.util.Arrays; import java.util.List; -import com.fasterxml.jackson.databind.ObjectMapper; +import tools.jackson.databind.ObjectMapper; import org.springframework.core.io.ClassPathResource; From 43e3949bd2a76b5d0c81d04c9ff83aff9cb30d4d Mon Sep 17 00:00:00 2001 From: ugur-vaadin Date: Wed, 15 Oct 2025 14:54:50 +0300 Subject: [PATCH 2/5] docs: apply suggestion --- articles/components/tree-grid/index.adoc | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/articles/components/tree-grid/index.adoc b/articles/components/tree-grid/index.adoc index 6e79df584c..e287936b57 100644 --- a/articles/components/tree-grid/index.adoc +++ b/articles/components/tree-grid/index.adoc @@ -148,11 +148,9 @@ include::{root}/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollT === Scrolling to an Item by Path -To use this feature, you need to specify the path of the item you want to view. The scroll position of the grid is adjusted to bring that item into view. +You can also scroll to an item by providing its hierarchical path – an array of indexes where each index refers to a child of the item at the previous index. For example, to scroll to the second child-row (index 1) of the third root-level row (index 2), you would provide the path 2, 1. -In contrast to scrolling to an item, possible collapsed parents of the item do not expand before scrolling. - -With multiple levels of hierarchy, you need to specify the row index for each level, separately. For example, to scroll to the second child-row (index 1) of the third root-level row (index 2), you would provide the indexes 2, 1. +Scrolling continues until it reaches the last index in the array or encounters a collapsed item. [.example] -- From e8922f5c03385ba2b176367f8694442c82ccc4c3 Mon Sep 17 00:00:00 2001 From: ugur-vaadin Date: Wed, 15 Oct 2025 15:33:51 +0300 Subject: [PATCH 3/5] docs: update example to use explicit types instead of var --- .../treegrid/TreeGridScrollToItem.java | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollToItem.java b/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollToItem.java index d614fe0400..92f91dac48 100644 --- a/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollToItem.java +++ b/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollToItem.java @@ -11,13 +11,14 @@ import com.vaadin.flow.router.Route; import java.util.ArrayList; +import java.util.List; @Route("tree-grid-scroll-to-item") public class TreeGridScrollToItem extends Div { private final TreeGrid treeGrid = new TreeGrid<>(); public TreeGridScrollToItem() { - var treeData = new TreeData(); + TreeData treeData = new TreeData<>(); treeData.addItems(DataService.getManagers(), manager -> DataService.getPeople(manager.getId())); treeGrid.setDataProvider(new TreeDataProvider<>(treeData)); @@ -27,14 +28,14 @@ public TreeGridScrollToItem() { add(treeGrid); - var scrollToItem = new Select(); + Select scrollToItem = new Select<>(); scrollToItem.setLabel("Scroll to item"); scrollToItem.setItemLabelGenerator(Person::getFullName); scrollToItem.setItems(getItemsToScrollTo()); scrollToItem.setWidth("200px"); scrollToItem.addValueChangeListener( event -> { - var item = event.getValue(); + Person item = event.getValue(); // tag::snippet[] treeGrid.scrollToItem(item); // end::snippet[] @@ -42,14 +43,14 @@ public TreeGridScrollToItem() { add(scrollToItem); } - private ArrayList getItemsToScrollTo() { - var itemsToScrollTo = new ArrayList(); - var managers = DataService.getManagers(); - var middleRootItem = managers.get(managers.size() / 2); + private List getItemsToScrollTo() { + List itemsToScrollTo = new ArrayList<>(); + List managers = DataService.getManagers(); + Person middleRootItem = managers.get(managers.size() / 2); itemsToScrollTo.add(middleRootItem); - var children = DataService.getPeople(middleRootItem.getId()); + List children = DataService.getPeople(middleRootItem.getId()); while (!children.isEmpty()) { - var middleChild = children.get(children.size() / 2); + Person middleChild = children.get(children.size() / 2); itemsToScrollTo.add(middleChild); children = DataService.getPeople(middleChild.getId()); } From a2a180dcc665f521ceb72b52911b035957386e80 Mon Sep 17 00:00:00 2001 From: ugur-vaadin Date: Wed, 15 Oct 2025 15:45:33 +0300 Subject: [PATCH 4/5] docs: specify class name for which to implement the methods --- articles/components/tree-grid/index.adoc | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/articles/components/tree-grid/index.adoc b/articles/components/tree-grid/index.adoc index e287936b57..afe357483c 100644 --- a/articles/components/tree-grid/index.adoc +++ b/articles/components/tree-grid/index.adoc @@ -144,7 +144,10 @@ include::{root}/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollT ---- -- -`TreeDataProvider` supports this feature out of the box. For other data providers, you will need to implement [methodname]#getParent(T item)# and [methodname]#getItemIndex(T item, HierarchicalQuery query)#. +`TreeDataProvider` supports this feature out of the box. For other data providers, you need to override and implement the following methods of [classname]`HierarchicalDataProvider`: + +- [methodname]#getParent(T item)# +- [methodname]#getItemIndex(T item, HierarchicalQuery query)# === Scrolling to an Item by Path From bbd65ece944fe131b3df7866dd3463a51f4c95b0 Mon Sep 17 00:00:00 2001 From: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com> Date: Wed, 15 Oct 2025 16:12:50 +0300 Subject: [PATCH 5/5] Update articles/components/tree-grid/index.adoc MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sascha Ißbrücker --- articles/components/tree-grid/index.adoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/articles/components/tree-grid/index.adoc b/articles/components/tree-grid/index.adoc index afe357483c..b3299401c0 100644 --- a/articles/components/tree-grid/index.adoc +++ b/articles/components/tree-grid/index.adoc @@ -146,8 +146,8 @@ include::{root}/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollT `TreeDataProvider` supports this feature out of the box. For other data providers, you need to override and implement the following methods of [classname]`HierarchicalDataProvider`: -- [methodname]#getParent(T item)# -- [methodname]#getItemIndex(T item, HierarchicalQuery query)# +- [methodname]`getParent(T item)` +- [methodname]`getItemIndex(T item, HierarchicalQuery query)` === Scrolling to an Item by Path