Edit this page

Toggle Nodes with Single Click

You might need to toggle the TreeView nodes between their expanded and collapsed state all at once.

The following example demonstrates how to achieve this behavior through a single click.

Example
    <div id="example" ng-app="KendoDemos">
        <div class="demo-section k-content" ng-controller="MyCtrl">
            <div kendo-tree-view="tree"
                 k-data-source="treeData"
                 ng-click="toggle($event)">
            </div>
        </div>
    </div>

    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
          .controller("MyCtrl", function($scope){
              $scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
                { text: "Item 1" },
                { text: "Item 2", items: [
                  { text: "SubItem 2.1" },
                  { text: "SubItem 2.2" }
                ] },
                { text: "Item 3" }
              ]});

              $scope.toggle = function(e) {
                  var target = $(e.target);
                  var toggleIcon = target.closest(".k-icon");
                  if (!toggleIcon.length) {
                      this.tree.toggle(target.closest(".k-item"));
                  }
              };
        })
    </script>

See Also

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy