doc: add scroll to item example and update article

Author: ugur-vaadin

articles/components/tree-grid/index.adoc

@@ -144,40 +144,21 @@ 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)#.
-
-=== 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.
-
-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.
+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.
 
 Scrolling continues until it reaches the last index in the array or encounters a collapsed item.
 
+With multiple levels of hierarchy, the path depends on the hierarchy format of the data provider.
+
+- If the data provider uses nested hierarchy format, 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 data provider uses flat hierarchy format, you need to specify the flat index of the item. The flat index only takes reachable items into account. Therefore, in order to reach the children of collapsed items, you need to expand them first. For example, to scroll to the second child-row (index 1) of the third root-level row (index 2) assuming only the ancestors of the item are expanded, you would provide the flat index 4.
+
 [.example]
 --
 ifdef::lit[]