diff --git a/articles/components/tree-grid/index.adoc b/articles/components/tree-grid/index.adoc index 5788117f2f..b3299401c0 100644 --- a/articles/components/tree-grid/index.adoc +++ b/articles/components/tree-grid/index.adoc @@ -123,11 +123,37 @@ 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. -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. +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 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 + +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. + +Scrolling continues until it reaches the last index in the array or encounters a collapsed item. [.example] -- 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..92f91dac48 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/treegrid/TreeGridScrollToItem.java @@ -0,0 +1,62 @@ +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; +import java.util.List; + +@Route("tree-grid-scroll-to-item") +public class TreeGridScrollToItem extends Div { + private final TreeGrid treeGrid = new TreeGrid<>(); + + public TreeGridScrollToItem() { + TreeData 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); + + Select scrollToItem = new Select<>(); + scrollToItem.setLabel("Scroll to item"); + scrollToItem.setItemLabelGenerator(Person::getFullName); + scrollToItem.setItems(getItemsToScrollTo()); + scrollToItem.setWidth("200px"); + scrollToItem.addValueChangeListener( + event -> { + Person item = event.getValue(); + // tag::snippet[] + treeGrid.scrollToItem(item); + // end::snippet[] + }); + add(scrollToItem); + } + + private List getItemsToScrollTo() { + List itemsToScrollTo = new ArrayList<>(); + List managers = DataService.getManagers(); + Person middleRootItem = managers.get(managers.size() / 2); + itemsToScrollTo.add(middleRootItem); + List children = DataService.getPeople(middleRootItem.getId()); + while (!children.isEmpty()) { + Person 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;