Scrolling to a Specific Node in Angular TreeView

Environment

Product

Progress® Kendo UI® for Angular TreeView

Description

I need to scroll to a specific node in the Kendo UI for Angular TreeView component similar to the scrollTo method of the TreeList component. How can I achieve this programmatically in the Angular TreeView?

This knowledge base article also answers the following questions:

• How can I programmatically scroll to a node in the Kendo UI for Angular TreeView?
• How can I use the scrollIntoView method to scroll to a specific node in the Angular TreeView?

Solution

To scroll to a specific node in the Kendo UI for Angular TreeView, you can combine the TreeView's focus method with the DOM scrollIntoView method.

The approach involves first focusing the target node, which applies a k-focus class to the element, and then using that class to identify and scroll to the element.

html

<kendo-treeview 
  #treeView
  kendoTreeViewHierarchyBinding
  [nodes]="nodes"
  textField="text"
  childrenField="items">
</kendo-treeview>

typescript

public focusAndScrollToNode(treeRef: TreeViewComponent): void {
  const nodeId = '25';
  treeRef.focus(nodeId);

  const focusedNodeElement = document.querySelector('.k-focus');
  if (focusedNodeElement) {
    focusedNodeElement.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    });
  }
}

The scrollIntoView method has a few options that can be used to customize the scrolling behavior. In this example, the block option is set to center to ensure that the node is centered in the viewport. You can also set the behavior option to auto or smooth to control the scrolling animation.

See Also

• TreeView API Reference
• TreeView Component API Documentation