Angular Tree Control not working perperly

Question

Angular Tree Control not working perperly

2k views Asked by GrailsLearner At 23 November 2024 at 09:43

I am using https://wix.github.io/angular-tree-control/#multi-selection to work on tree structure example.I am not getting the expected result in a proper format.Below is the code and also attached plunkr to it.

 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
 <link href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
 <link href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
 </head>
 <div ng-app="app">
 <div ng-controller="myController">
 <treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
 </treecontrol>
 </div>
 </div>

  angular.module('app', ['treeControl'])
 .controller('myController', function() {
 $scope.treeOptions = {
 nodeChildren: "children",
 dirSelectable: true,
 injectClasses: {
    ul: "a1",
    li: "a2",
    liSelected: "a7",
    iExpanded: "a3",
    iCollapsed: "a4",
    iLeaf: "a5",
    label: "a6",
    labelSelected: "a8"
  }
 }
$scope.dataForTheTree =
[
    { "name" : "Joe", "age" : "21", "children" : [
    { "name" : "Smith", "age" : "42", "children" : [] },
    { "name" : "Gary", "age" : "21", "children" : [
        { "name" : "Jenifer", "age" : "23", "children" : [
            { "name" : "Dani", "age" : "32", "children" : [] },
            { "name" : "Max", "age" : "34", "children" : [] }
        ]}
    ]}
]},
{ "name" : "Albert", "age" : "33", "children" : [] },
{ "name" : "Ron", "age" : "29", "children" : [] }
];
});
Here is the attached plunkr https://plnkr.co/edit/bQHOIQ2HDPr4WJaukB8I?p=preview

Original Q&A

There are 1 answers

**riyas** · Accepted Answer · 2018-08-09 07:46:48

I noticed that two things are missing:

The context-menu module is missing.
There is no rel="stylesheet" in added CSS links.

Even though angular-tree-control readme says:

Include context-menu module if you're going to use menu-id attribute

I found issues reported in their GitHub page like this one, which is due to missing context-menu module.

Add following line to include context-menu module:

<script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>

Also please update link elements to include rel attribute like follows:

<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />

There is no need to add CSS as in Plunker which is the duplicate of above links.

Hope this fixes your issues. Here is the full code of a working example:

angular.module('app', ['treeControl'])
  .controller('myController', ['$scope', function($scope) {
    $scope.treeOptions = {
      nodeChildren: "children",
      dirSelectable: true,
      injectClasses: {
        ul: "a1",
        li: "a2",
        liSelected: "a7",
        iExpanded: "a3",
        iCollapsed: "a4",
        iLeaf: "a5",
        label: "a6",
        labelSelected: "a8"
      }
    }
    $scope.dataForTheTree = [{
        "name": "Joe",
        "age": "21",
        "children": [{
            "name": "Smith",
            "age": "42",
            "children": []
          },
          {
            "name": "Gary",
            "age": "21",
            "children": [{
              "name": "Jenifer",
              "age": "23",
              "children": [{
                  "name": "Dani",
                  "age": "32",
                  "children": []
                },
                {
                  "name": "Max",
                  "age": "34",
                  "children": []
                }
              ]
            }]
          }
        ]
      },
      {
        "name": "Albert",
        "age": "33",
        "children": []
      },
      {
        "name": "Ron",
        "age": "29",
        "children": []
      }
    ];
  }]);

treecontrol.tree-classic li .full {
  display: none;
}

treecontrol.tree-classic li .empty {
  display: inline;
}

treecontrol.tree-classic li .tree-selected .full {
  display: inline;
}

treecontrol.tree-classic li .tree-selected .empty {
  display: none;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
  <script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>
  <link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
  <link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body ng-app="app">
  <div ng-controller="myController">
    <treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions" on-selection="showSelected(node)" selected-node="node1">
      <span class="fa fa-square-o empty"></span>
      <span class="fa fa-square full"></span> employee: {{node.name}} age {{node.age}}
    </treecontrol>
  </div>

</body>

</html>

UPDATE on 10/08/2018: edited the code snippet to add checkboxes using FontAwsome.

TechQA.

Angular Tree Control not working perperly

There are 1 answers

Related Questions in ANGULARJS

Related Questions in TREECONTROL

Popular Questions

Popular Tags

Trending Questions