AngularJS kendo treeview selected child node programmatically

Question

Based on the following code I am able to select nodes in the tree view if the id I provide belongs to a parent node, example: 1. But when I provide the id of a child node, example: 2.1, it is not able to select the node from code level. The following is the code I am currently using:

<div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
        <div class="box-col">
            <h4>TreeView</h4>
            <div kendo-tree-view="tree"
                k-data-source="treeData"
                k-on-change="selectedItem = dataItem">
                <span k-template>
                    {{dataItem.text}}
                </span>
            </div>
        </div>
    </div>
</div>


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

      $scope.click = function(dataItem) {
        alert(dataItem.text);
      };

      $scope.selectNode = function(id) {
          $scope.branchId = id;
          var item = $scope.treeData._data.find(findKendoBranchById);
          var node = $scope.tree.findByUid(item.uid);
          $scope.tree.select(node);
      }

      function findKendoBranchById(item, index, kendo) {
          var isThisBranch = false;

          if (item.id == null) {
              isThisBranch = item.text == $scope.branchId;
          } else {
              isThisBranch = item.id == $scope.branchId;
          }

          return isThisBranch;
      }

      $timeout(function() {
          $scope.selectNode(2);
          //when this runs, will show the error below
          $scope.selectNode(2.1); 
      }, 2000);
  }]);

VM1703 angular.min.js:107 TypeError: Cannot read property 'uid' of undefined
at n.$scope.selectNode (<anonymous>:20:50)
at <anonymous>:38:18
at VM1703 angular.min.js:146
at e (VM1703 angular.min.js:43)
at VM1703 angular.min.js:45

Ryan Teh · Accepted Answer · 2017-07-07 09:33:24Z

1

In the end i chose to re-init the treeview when the selected node is changed.

$scope.rawData = [
   { text: "Item 1", id: 1 },
   { text: "Item 2", id: 2, items: [
      { text: "SubItem 2.1", id: 2.1 },
      { text: "SubItem 2.2", id: 2.2 }
      ]
   }];
$scope.selectNode = function(id){
   $scope.treeData = new kendo.data.ObservableArray(processSelectedNode($scope.rawData, id));
};

function processSelectedNode(array, id){
    var navigationData = [];

    for (var i = 0; i < array.length; i++) {
       var obj = array[i];
       obj.expanded = true;
       obj.selected = obj.id == id;

       if (array[i].items) {
           obj.items = prepareNavigationTreeDataSource(array[i].items, id);
        }

        navigationData.push(obj);
    }
}

This works for me as the Kendo Treeview will select the node with selected = true

answered Jul 7, 2017 at 9:33

Ryan Teh

5498 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS kendo treeview selected child node programmatically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related