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>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.