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

Question

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>

That's not the right way to ask a question, you need to post some code, and give a bit of context. The accepted question are supposed to be useful to others too! See stackoverflow.com/help/how-to-ask — kebs
– kebs, Commented Oct 30, 2015 at 19:06
I can't figure out how to change my current link in stackoverflow editor, Can you update it behalf of me? — Dilip Borad
– Dilip Borad, Commented Oct 31, 2015 at 7:31
You have an "edit" button at the bottom of the question. And no, I can't edit it myself. — kebs
– kebs, Commented Oct 31, 2015 at 22:10
I've edited it and added code snippet, on the grid treeview the plus icon is not showing as like plnkr.co/edit/gA0vRP?p=preview — Dilip Borad
– Dilip Borad, Commented Nov 1, 2015 at 13:57

jbmartinez · Accepted Answer · 2015-11-30 00:37:22Z

2

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.

answered Nov 30, 2015 at 0:37

jbmartinez

6345 silver badges8 bronze badges

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

2 Comments

Dilip Borad Over a year ago

Now check this plnkr plnkr.co/edit/gA0vRP?p=preview. Now hierarchy wise it's ok but Here is another problem is very next row which has a child it's automatically hidden on first row which has a child.

jbmartinez Over a year ago

The writeoutNode function is still assigning the $$treeLevel incorrectly. See this fork of your plnkr for a slightly better solution. It is not fully tested though.

Gal Margalit · Accepted Answer · 2018-11-25 17:24:52Z

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, []);

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related