DevExtreme TreeView – API Enhancements (v20.1)

In our most recent release (v20.1), we addressed a series of user requests and added three new methods to our JavaScript TreeView component:
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.
Live examples: Angular | Vue | React | jQuery

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. 

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
1 comment(s)
Dmitry Mihaylichenko
Dmitry Mihaylichenko
I like it, exellent work!
29 May 2020

Please login or register to post comments.