{"id":1776,"date":"2022-08-30T15:19:21","date_gmt":"2022-08-30T15:19:21","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/how-to-use-ng-grid-with-ng-tree-in-angular-js-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:21","modified_gmt":"2022-08-30T15:19:21","slug":"how-to-use-ng-grid-with-ng-tree-in-angular-js-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/how-to-use-ng-grid-with-ng-tree-in-angular-js-collection-of-common-programming-errors\/","title":{"rendered":"How to use ng-grid with ng-tree in angular js?-Collection of common programming errors"},"content":{"rendered":"

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:<\/p>\n

var app;\n\n\napp = angular.module('AbnTest', ['angularBootstrapNavTree']);\n\n\/*app=angular.module('AbnTest',['ngGrid']);*\/\n\napp.controller('AbnTestController', function($scope) {\n  var apple_selected;\n  $scope.my_default_handler = function(branch) {\n    var _ref;\n    $scope.output = \"You selected: \" + branch.label;\n    if ((_ref = branch.data) != null ? _ref.description : void 0) {\n      return $scope.output += '(' + branch.data.description + ')';\n    }\n  };\n  apple_selected = function(branch) {\n    return $scope.output = \"APPLE! : \" + branch.label;\n  };\n\n  $scope.myData = [{name: \"Moroni\", age: 50},\n             {name: \"Tiancum\", age: 43},\n             {name: \"Jacob\", age: 27},\n             {name: \"Nephi\", age: 29},\n             {name: \"Enos\", age: 34}];\n\n             $scope.gridOptions = { data: 'myData' };\n\n\n $scope.example_treedata = [ {\n  label: 'Mineral',\n  children: [\n    {\n      label: 'Rock',\n      children: ['Igneous', 'Sedimentary', 'Metamorphic']\n    }, {\n      label: 'Metal',\n      children: ['Aluminum', 'Steel', 'Copper']\n    }, {\n      label: 'Plastic',\n      children: [\n        {\n          label: 'Thermoplastic',\n          children: ['polyethylene', 'polypropylene', 'polystyrene', ' polyvinyl chloride']\n        }, {\n          label: 'Thermosetting Polymer',\n          children: ['polyester', 'polyurethane', 'vulcanized rubber', 'bakelite', 'urea-formaldehyde']\n        }\n      ]\n    }\n  ]\n }\n ];\n    return $scope.change = function() {\n    debugger;\n   return $scope.example_treedata = [\n     {\n     label: 'Animal',\n     children: ['Cat', 'Dog']\n    }\n  ];\n};\n});\n<\/code><\/pre>\n
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?<\/p>\n
This is my html file:<\/p>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n    \n    \n    \n    \n    \n    \n\n   \n    \n     \/*var app = angular.module('AbnTest', ['ngGrid']);\n           app.controller('MyCtrl', function($scope) {\n              csvOpts = { columnOverrides: { obj: function(o) { return o.a + '|' +  o.b;   } } }\n            hgtOpts = { minHeight: 200 }  ;\n            $scope.myDataSmall = [ {hasThing: false,  obj: {a:5, b:6}, name: \"Moroni\", age: 50, ln: 'sdf'}\n                                 , {hasThing:  true,  obj: {a:6, b:7}, ln: \"Tiasdfsdfnd\", age: 43}\n                                 ]\n\n\n            $scope.gridOptionsSmall = {\n                data: 'myDataSmall',\n                plugins: [new ngGridCsvExportPlugin(csvOpts),new ngGridFlexibleHeightPlugin()],\n                showGroupPanel: true,\n                showFooter: true\n            };\n        });*\/\n   \/*angular.element(document).ready(function() {\n   alert(document.getElementById('test'));\n       angular.bootstrap(document.getElementById('test'), ['ngGrid']);\n    app.controller('AbnTestController', function($scope) {\n    $scope.myData = [{name: \"Moroni\", age: 50},\n             {name: \"Tiancum\", age: 43},\n             {name: \"Jacob\", age: 27},\n             {name: \"Nephi\", age: 29},\n             {name: \"Enos\", age: 34}];\n\n             $scope.gridOptions = { data: 'myData' };\n\n });\n    });*\/\n \n \n\n \n \n  Change\n  \n    \n    \n      <\/code><\/pre>\n
Tree With Grid<\/code><\/h2>\n
\n\n  \n\n
\n\n  \n  \n    \n  \n  \n\n    \n    <\/pre>\n\n\n\n\n
Sl. No<\/b><\/td>\nCustomer Name<\/b><\/td>\nAccount No.<\/b><\/td>\nSecurity No.<\/b><\/td>\n<\/tr>\n
{{ output }}<\/td>\n{{ output }}<\/td>\n{{ output }}<\/td>\n{{ output }}<\/td>\n<\/tr>\n
{{ output }}<\/td>\n{{ output }}<\/td>\n{{ output }}<\/td>\n{{ output }}<\/td>\n<\/tr>\n<\/table>\n
This is the error on Browser console:<\/p>\n
Uncaught Error: Unknown provider: $animatorProvider<\/code><\/pre>\n
Originally posted 2013-12-02 01:21:23. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1776","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1776"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1776\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}