Scroll to Item

You might need to list a great number of items in the TreeView of your AngularJS application.

The following example demonstrates how to scroll to a particular item of the TreeView that has a given id.

Example

    <div id="example" ng-app="KendoDemos">
      <div class="demo-section k-content" ng-controller="MyCtrl">
        <div kendo-tree-view="tree" k-options="treeOptions"></div>

        <button class="k-button" ng-click="scrollToItem()">Scroll to item</button>
      </div>
    </div>

    <style>
      .k-button {
                position: fixed;
        top: 1em;
        right: 1em;
      }
    </style>

    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){

        $scope.treeOptions = {
          dataSource: {
            data: generate(3, 5) // 5^3 nodes
          }
        };

        $scope.scrollToItem = function() {
          var tree = $scope.tree;
          var found = tree.dataSource.get(17); // get item by id

          if (found) {
            // visual cue, remove to prevent selection
            found.set("selected", true);

            var li = tree.findByUid(found.uid);

            var itemScrollTop = li[0].offsetTop;
            $("html,body").animate({ scrollTop: itemScrollTop });
          }
        };

        // functions that generate items
        function item(level, id) {
          var hasChildren = level > 0;
          return { id: id, text: "Node " + id, expanded: hasChildren };
        }

        function generate(level, count) {
          var result = [];
          if (level > 0) {
            for (var i = 0; i < count; i++) {
              var x = item(level, level * count + i);

              x.items = generate(level-1, count);
              result.push(x);
            }
          }
          return result;
        }

      })
    </script>

See Also

• TreeView JavaScript API Reference
• How to Check Nodes Programmatically
• How to Edit Nodes via Form
• How to Filter Out Search Results
• How to Hide Checkboxes for Root Level
• How to Persist Expanded State
• How to Render Multiple TreeViews Using HTML Source Binding
• How to Scroll to Selected Item
• How to Use FontAwesome Icons

For more runnable examples on the Kendo UI TreeView, browse its How To documentation folder.