In our most recent release (v20.1), we addressed a series of user requests and added three new methods to our JavaScript TreeView component:
- scrollToItem - Scrolls to the specified item in the TreeView.
- getSelectedNodes - Returns all selected nodes.
- getSelectedNodeKeys - Returns the keys for all selected nodes.
Let’s take a closer look at these new features and describe how they can be incorporated into your DevExtreme powered web app.
Scroll to Item
The ‘scrollToItem‘ method allows you to programmatically scroll to the desired node. This method can accept the node’s key, its DOM element, or an underlying data object. If the target node is hidden within collapsed parent nodes, parent nodes are expanded automatically. The following example demonstrates it in action:
The ‘scrollToItem‘ method returns a Promise object that gets resolved as soon as scroll operations are completed. You can handle it to execute custom logic once the scroll operation finished.
Get Selected Nodes
In previous versions, you needed to traverse the entire node tree and search for selected nodes to obtain all selected rows. The new ‘getSelectedNodes’ method allows you to obtain all selected nodes via a single method call. For a usage example, please refer to the following demo: Node Selection and Customization
Note: You can also get selected nodes keys when necessary. To accomplish this task, you need to use our new ‘getSelectedNodeKeys’ method. This option can help synchronize selected nodes with other UI components. One of such use case is demonstrated in the following demo: Drop-Down TreeView.
Important Notes
The following limitations apply if lazy node loading has been enabled (Virtual Mode or the ‘createChildren‘ callback is used):
- ‘scrollToItem‘ scrolls the TreeView to loaded nodes only. It returns a rejected Promise object once you try to scroll to a node that has yet to be loaded.
- The ‘getSelectedNodes‘ and ‘getSelectedNodeKeys‘ methods only return loaded nodes and keys.
Feedback
As always, we look forward to your feedback. Feel free to comment below or post a support ticket in the DevExpress Support Center.