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. 

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.