CODEWITHSUNDEEP
angularjstreeviewangular-uiangular-ui-bootstrap
Dilip Borad
Dilip Borad

Reputation: 179

Angular ui grid treeview : Issue with all parent is automatically go as a first child

First please check my code

Like i've use exact guidelines and follows all instructions from Angular ui treeview. All things is working proper but i need a different output rather than current one.

Currently on my data object i've set first "2627" one has a two childs[3601, 3602], so first one is looks like ok for me. Then the second row "3226" is automatically come under as child of first row "2627". But actually the second row not has any child so i think by default it's a parent right ?

When i've change the order of rows( Like swap full row "2627" as second row ) from my data object then first row is looks fine and then rest of all other parent which not has child element is comes under "2627".

I think you can understand my concern, about what i actually need.

Let me know if anything i've missed ?

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.treeView', 'ui.grid.pagination']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridTreeViewConstants', function($scope, $http, $interval, uiGridTreeViewConstants) {
  $scope.gridOptions = {
    enableSorting: true,
    multiSelect: false,
    enableFiltering: true,
    enableRowSelection: true,
    showTreeRowHeader: true,
    enableRowHeaderSelection: true, // Display checkboxes on every row when it's true
    showTreeExpandNoChildren: true,
    columnDefs: [{
      name: 'id',
      width: '30%'
    }, {
      name: 'client_id',
      width: '40%'
    }],
    rowTemplate: "csra-row-template.html"
  };

  var data =

    [{
      "id": 2627,
      "client_id": 182,
      
      "childCSRAs": [{
        "id": 3601,
        "client_id": 182,
        
      }, {
        "id": 3602,
        "client_id": 182,
        
      }]
    }, {
      "id": 3226,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 4223,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 12,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 2624,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 2619,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 4393,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 2716,
      "client_id": 182,
      
      "childCSRAs": [],
      
    }, {
      "id": 5119,
      "client_id": 182,
      "childCSRAs": [{
        "id": 2620,
        "client_id": 182,
        
      }, {
        "id": 3133,
        "client_id": 182,
       
      }]
    }, {
      "id": 2718,
      "client_id": 182,
      
      "childCSRAs": [{
        "id": 4210,
        "client_id": 182
      }, {
        "id": 2612,
        "client_id": 182,
        
      }]
    }];

  var writeoutNode = function(childArray, currentLevel, dataArray) {

    if (typeof childArray !== 'undefined') {
      childArray.forEach(function(childNode) {
        if (typeof childNode.childCSRAs !== 'undefined') {
          if (childNode.childCSRAs.length > 0) {
            childNode.$$treeLevel = currentLevel;
          }
        }
        dataArray.push(childNode);
        writeoutNode(childNode.childCSRAs, currentLevel + 1, dataArray);
      });
    }
  };
  /*var dataArray = []
  for(i=0; i<=data.length; i++){
    if (typeof childArray !== 'undefined') {
      if(data[i].childCSRAs.length >0){
        data[i].$$treeLevel = 0;
      }
    }
  }*/

  $scope.gridOptions.data = [];
  writeoutNode(data, 0, $scope.gridOptions.data);
}]);
.grid {
   height: 600px;
}
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-tree-view class="grid"></div>
</div>
    <script src="app.js"></script>
    <script type="text/ng-template" id="csra-row-template.html">
    <div ng-dblclick="grid.appScope.showInfo(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ui-grid-cell></div>
</script>
  </body>
</html>

Upvotes: 1

Views: 5034

Answers (2)

Gal Margalit
Gal Margalit

Reputation: 5844

Some insight from my experience with Angular UI Grid

  • Always have a value assigned to $$treeLevel, don't leave it blank or it'll cause either wrong parent or indentation assignment.

  • Due to the recursive nature of the problem, I am not sure there is a solution with the tree level being passed around for all tree types, there will always be some glitch.

  • You will need to take care of indentation manually.
    Always keep the child nodes assigned to the correct parent, then work your way with dynamic CSS indentation.
  • In my use-case, every child node had its parent ID, as opposed to the author's structure.
    I've used lodash, and fully tested the algorithm.

Hope people will find it useful.

Solution

     function buildFlatArr(childArray, dataArray ){
        childArray.forEach(childNode => {
          let parent = _.find(dataArray,item=>{ return childNode.parentId === item.id });
          childNode.$$treeLevel= (parent) ? parent.$$treeLevel+1 : 0;
          dataArray.push( childNode );
          if (childNode.children && childNode.children.length > 0) {
            buildFlatArr(childNode.children, dataArray);
          }
        });
      };


     let flarArr = buildFlatArr(someArr, []);

Upvotes: 2

jbmartinez
jbmartinez

Reputation: 634

UI Grid considers any element without the $$treeLevel property as a child of the last element with $$treeLevel until another object with a $$treeLevel property is found, even if the array is flat.

Your writeoutNode function is assigning a $$treeLevel value only for elements with children, currently ids 2627, 5119 and 2718. So any other element is treated as children of those objects.

To show the real hierarchy, change the writeoutNode function to assign the $$treeLevel property accordingly for every element.

Upvotes: 2

Related Questions