Scroll to the Selected TreeView Item

Environment

Product	Progress® Kendo UI® TreeView for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I scroll the viewport to the selected node of the Kendo UI for jQuery TreeView?

Solution

The following example demonstrates how to achieve the desired scenario.

    <div id="tree"></div>

    <script>
      // Set up: generate the data, select an item.
      var data = [];
      for (var i = 0; i < 1000; i++) {
        data.push({ text: "Item " + i });
      }
      $("#tree").kendoTreeView({
        dataSource: data
      });
      var treeview = $("#tree").data("kendoTreeView");
      treeview.select(treeview.findByText("Item 500"));

      // Scroll to the selected item.
      var itemScrollTop = treeview.select()[0].offsetTop;
      $("html,body").animate({ scrollTop: itemScrollTop });
    </script>

See Also

• Basic Usage of the TreeView (Demo)
• Using the API of the TreeView (Demo)
• JavaScript API Reference of the TreeView