How to use ng-grid with ng-tree in angular js?

Question

I am trying to implement a ng-grid along with tree functionality in Angular js. But I am not clear how to add dependency in it. If I am using only tree , its working fine , but when I am adding grid to it , the tree does not appear on the page. Here is my code of the controller:

var app;


app = angular.module('AbnTest', ['angularBootstrapNavTree']);

/*app=angular.module('AbnTest',['ngGrid']);*/

app.controller('AbnTestController', function($scope) {
  var apple_selected;
  $scope.my_default_handler = function(branch) {
    var _ref;
    $scope.output = "You selected: " + branch.label;
    if ((_ref = branch.data) != null ? _ref.description : void 0) {
      return $scope.output += '(' + branch.data.description + ')';
    }
  };
  apple_selected = function(branch) {
    return $scope.output = "APPLE! : " + branch.label;
  };

  $scope.myData = [{name: "Moroni", age: 50},
             {name: "Tiancum", age: 43},
             {name: "Jacob", age: 27},
             {name: "Nephi", age: 29},
             {name: "Enos", age: 34}];

             $scope.gridOptions = { data: 'myData' };


 $scope.example_treedata = [ {
  label: 'Mineral',
  children: [
    {
      label: 'Rock',
      children: ['Igneous', 'Sedimentary', 'Metamorphic']
    }, {
      label: 'Metal',
      children: ['Aluminum', 'Steel', 'Copper']
    }, {
      label: 'Plastic',
      children: [
        {
          label: 'Thermoplastic',
          children: ['polyethylene', 'polypropylene', 'polystyrene', ' polyvinyl chloride']
        }, {
          label: 'Thermosetting Polymer',
          children: ['polyester', 'polyurethane', 'vulcanized rubber', 'bakelite', 'urea-formaldehyde']
        }
      ]
    }
  ]
 }
 ];
    return $scope.change = function() {
    debugger;
   return $scope.example_treedata = [
     {
     label: 'Animal',
     children: ['Cat', 'Dog']
    }
  ];
};
});

Here I have commented out the dependency for ng-grid because it is creating issues with tree functionality. Has anyone faced a similar kind of issue?

This is my html file:

<!DOCTYPE html>
<html ng-app="AbnTest">
<head>
<script type="text/javascript" src="../test/jquery.min.js"></script>
<!-- Bootstrap 2-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-     bootstrap/2.3.2/css/bootstrap-combined.min.css">
<!--script(src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js")-->
<!-- Angular JS-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<!-- Font Awesome (optional)-->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<!--/-->
<!-- abn-tree ( the thing we are testing )-->
<!---->
<script src="../dist/abn_tree_directive.js"></script>
<link rel="stylesheet" href="../dist/abn_tree_style.css">
<!-- js for this test page:-->
<script src="../test/test_abn_tree.js"></script>
<script type="text/javascript" src="../test/ng-grid.js"></script>
    <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script type="text/javascript" src="ng-grid.debug.js"></script>
    <script type="text/javascript" src="ng-grid-csv-export.js"></script>
    <script type="text/javascript" src="ng-grid-flexible-height.js"></script>
<!-- Live Reload ( for development )-->
   <!-- <script src="http://localhost:35729/livereload.js"></script> -->
    <script>
     /*var app = angular.module('AbnTest', ['ngGrid']);
           app.controller('MyCtrl', function($scope) {
              csvOpts = { columnOverrides: { obj: function(o) { return o.a + '|' +  o.b;   } } }
            hgtOpts = { minHeight: 200 }  ;
            $scope.myDataSmall = [ {hasThing: false,  obj: {a:5, b:6}, name: "Moroni", age: 50, ln: 'sdf'}
                                 , {hasThing:  true,  obj: {a:6, b:7}, ln: "Tiasdfsdfnd", age: 43}
                                 ]


            $scope.gridOptionsSmall = {
                data: 'myDataSmall',
                plugins: [new ngGridCsvExportPlugin(csvOpts),new ngGridFlexibleHeightPlugin()],
                showGroupPanel: true,
                showFooter: true
            };
        });*/
   /*angular.element(document).ready(function() {
   alert(document.getElementById('test'));
       angular.bootstrap(document.getElementById('test'), ['ngGrid']);
    app.controller('AbnTestController', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
             {name: "Tiancum", age: 43},
             {name: "Jacob", age: 27},
             {name: "Nephi", age: 29},
             {name: "Enos", age: 34}];

             $scope.gridOptions = { data: 'myData' };

 });
    });*/
</script> 
<link rel="stylesheet" type="text/css" href="../dist/ng-grid.css" /> 
</head>
 <body >
 <div ng-controller="AbnTestController">
  <button ng-click="change()">Change</button>
  <div class="row">
    <div class="span2"></div>
    <div class="span10">
      <h2>Tree With Grid</h2>

  </div>
</div>
<div class="row"><br></div>
<div class="row">
  <div class="span2"></div>
  <div class="span4 well">
    <abn-tree header="This is the example tree" tree-data="example_treedata" icon-leaf="icon-file" on-select="my_default_handler(branch)" expand-level="2" initial-selection="Vegetable"></abn-tree>
  </div>
  <div class="span8 well">

    <div>
    <table Border=1 rule="rows"><tr>
    <td><b>Sl. No</b></td>
    <td><b>Customer Name</b></td>
    <td><b>Account No.</b></td>
    <td><b>Security No.</b></td>
    </tr>
    <tr>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    </tr>
    <tr>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    </tr>
    </table>

  </div>
  </div>
  </div>
  </div> 
  <div ng-controller="MyCtrl" >
 <!-- <div id="test" ng-app="AbnTest" ng-controller="AbnTestController"> <div   class="gridStyle" ng-grid="gridOptions"> -->
  <div class="gridStyle" ng-grid="gridOptionsSmall"></div>


 </div>

   </body>
 </html>

This is the error on Browser console:

Uncaught Error: Unknown provider: $animatorProvider <- $animator angular.js:2765
Error: Argument 'MyCtrl' is not a function, got undefined
at qa (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16:79)
at ra (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16:187)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:50:411
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42:146
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:6:312)
at j (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42:8)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:207)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:224)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:224)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:37:339 angular.min.js:60


Error: Syntax Error: Token 'track' is an unexpected token at column 35 of the     expression [tree_rows | filter:{visible:true} track by row.branch.uid] starting at [track   by row.branch.uid].
at Error (<anonymous>)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:65:272)
at Mc (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:71:380)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:75:102
at Object.e.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86:216)
at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:142:490)
at Object.e.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:84:286)
at Object.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86:379)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:92:330)
at o (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:95:407) angular.min.js:60
Error: Syntax Error: Token 'track' is an unexpected token at column 35 of the expression [tree_rows | filter:{visible:true} track by row.branch.uid] starting at [track by row.branch.uid].
at Error (<anonymous>)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:65:272)
at Mc (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:71:380)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:75:102
at Object.e.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86:216)
at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:142:490)
at Object.e.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:84:286)
at Object.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86:379)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:92:330)
at o (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:95:407) angular.min.js:60

What is the error? See browser console. How did you declare the tree and grid dependencies. Something like app=angular.module('AbnTest',['ngGrid','angularBootstrapNavTree']) — Chandermani
– Chandermani, Commented Sep 11, 2013 at 9:53
I get {{option}} (i.e array name) rather than its value. Also the tree disappears. — user2519644
– user2519644, Commented Sep 11, 2013 at 10:40

Jhankar Mahbub · Accepted Answer · 2014-06-17 14:19:22Z

warning: not a direct answer to this question

i needed a grid for tree structured data and ended up using code provided by abn tree to create tree-grid directive.

demo: tree-grid

  <tree-grid tree-data="my_tree_data"></tree-grid>

Provide a tree structured data, column definition and a property where you want to expand in your controller.

 $scope.tree_data = [
 {Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10",
  children:[
    {Name:"California", Area:423970,Population:38340000,TimeZone:"Pacific Time",
        children:[
            {Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"},
            {Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"}
        ]
    },
    {Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone",
        children:[
           {Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"}
        ]
      }
    ]
  },    
  {Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"}
];

Optionally you can provide colDefinition, the property you want to expand. If expanding property is not provided it defaults to fist string type property or first one.

$scope.col_defs = [
   { field: "Description"},
   { field: "DemographicId", displayName: "Demographic Id"},
   { field: "ParentId", displayName: "Parent Id"},
   { field: "Area"},
   { field: "Population"},
   { field: "TimeZone", displayName: "Time Zone"}
];

$scope.expanding_property = "Name";

Check details: https://github.com/khan4019/tree-grid-directive

Steve · Accepted Answer · 2013-09-24 00:28:22Z

0

I had same error but I was not using the grid but many other dependencies. I upgraded AngularJS from 1.0.8 to 1.2.0-rc.2 and it fixed the issue...here's hoping RC2 doesn't cause more grief in other areas! Does that help for your issue?

answered Sep 24, 2013 at 0:28

Steve

1,46712 silver badges25 bronze badges

Comments

Nick Perkins · Accepted Answer · 2013-11-03 17:07:35Z

0

The error about "track" is because abn-tree uses the "track by" feature which was added to AngularJS in 1.1.5.

The abn-tree works well with Angular 1.1.5 or Angular 1.2.0, and with Bootstrap 2 or Bootstrap 3.

answered Nov 3, 2013 at 17:07

Nick Perkins

8,3647 gold badges43 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to use ng-grid with ng-tree in angular js?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related