Ui-Grid TreeView with hierarchical Json data unable to bind properly

[vijender1256]

Hi, I couldn't build a tree using UI-Grid , please help me to fix this below is the code what i got:

I also have a heirarchial json which i need to use to build the treeview, below code is the controller code which i tried to use which i grabbed from the demo :

http://ui-grid.info/docs/#/tutorial/215_treeView

//Controller Code
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.treeView' ]);

app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridTreeViewConstants', function ($scope, $http, $interval, uiGridTreeViewConstants ) {
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
showTreeExpandNoChildren: true,
columnDefs: [

  { name: 'id', width: '20%' },
  { name: 'parentId', width: '20%' },
  { name: 'name', width: '30%' }
],
};

var data = [
{
"id": 1,
"parentId": 1,
"name": "TopLoc1",
"children": [
{
"id": 2,
"parentId": 1,
"name": "Loc1 child",
"children": [
{
"id": 4,
"parentId": 2,
"name": "Loc2 child",
"children": []
}
]
},
{
"id": 3,
"parentId": 1,
"name": "Loc1 child",
"children": []
}
]
},
{
"id": 5,
"parentId": 5,
"name": "Top Loc 2",
"children": [
{
"id": 6,
"parentId": 5,
"name": "Loc5 child",
"children": [
{
"id": 8,
"parentId": 6,
"name": "Loc6 child",
"children": []
},
{
"id": 9,
"parentId": 6,
"name": "Loc5 child",
"children": []
},
{
"id": 10,
"parentId": 6,
"name": "Loc5 child",
"children": [
{
"id": 11,
"parentId": 10,
"name": "Loc10 child",
"children": [
{
"id": 12,
"parentId": 11,
"name": "Loc11 child",
"children": []
}
]
}
]
}
]
},
{
"id": 7,
"parentId": 5,
"name": "Loc5 child",
"children": []
}
]
}
];
$scope.gridOptions.data = data;
}]);

Please reply as early as you could, i am waiting on you, I really appreciate your help guys :)

[PaulL1]

Any chance of a plunker demonstrating? You should be able to just click the "edit in plunker" button in the treeView tutorial, then edit the code to match what you're doing. If that still doesn't work I can take a look later this morning.

[vijender1256]

Hello PaulL1, Thank you very much for replying, below is the link for the plunker code I saved, Please have a look at it. It has hierarchial json data, but it doesn't bind onto the uigrid. Please help, The json data will not be static it will be given to us by external source in hierarchical manner so we need to be able to generate treeGrid :(

http://plnkr.co/edit/aV6j9ux9c2AjkkYvyfSu

[PaulL1]

You're creating the data incorrectly. The data should be formatted as a single array, not as a tree, and you put a $$treelevel on each of the rows to tell us what level it sits at in the hierarchy. We automatically build the tree based on the position of each row in the array.

Sorry, I should have been able to tell that from your first comment, the formatting threw me and I didn't notice that it was a tree.

[vijender1256]

Hello PaulL1, Thanks for you reply, I am confused of which child goes under which parent. Its all dynamic data that we get from external source, we just have parentId to push which child under what parent. we cannot just hardcode the treelevels like the demo plunker:

 data[0].$$treeLevel = 0;
 data[1].$$treeLevel = 1;
 data[10].$$treeLevel = 1;
 data[11].$$treeLevel = 1;
 data[20].$$treeLevel = 0;
 data[25].$$treeLevel = 1;
 data[50].$$treeLevel = 0;
 data[51].$$treeLevel = 0;

we will just have parentID column based on the we need to decide which levels it goes and under what ID, it will have multiple levels , i have updated the plunker with flat data, but can you please help me to make the grid as tree with that dynamic data, here is the plunker:

http://plnkr.co/edit/aV6j9ux9c2AjkkYvyfSu?p=preview

Also, pagination is also not working :(

[PaulL1]

OK, if you can get it into a tree as you did in your first example (presuming you can write the code for that), then you can just recursively read that tree out into a data array, putting on $$treeLevel as you go.

http://plnkr.co/edit/As40VeguYNtQ0HcRpUtC?p=preview

[vijender1256]

PaulL1, awesome thank you very much but ID 7 is going under 11, but according to my json its actaully should going under 5, 7 parent is 5 not 11 , also 3 should go under parent 1 not under 2. Thank you very much for quick response :)

[PaulL1]

I had to recreate the structure by hand because the plunker had been overwritten - I may have just created the input file incorrectly. The code probably should work either way.

[vijender1256]

PaulL1, thank you very much I have recreated the plunker but I have issues in generating the proper tree, Child 3 should go under parent 1 not 2, and same with 7 it should go under parent 5 not under 11, please help me to resolve this , thanks alot for your help :)

Update Plunker:
http://plnkr.co/edit/L5ngh18qUMFlveVsfHlR?p=preview

[vijender1256]

Hello @PaulL1

Can you please help to figure this out, I mean I updated the plunker but still the UI-Grid is not binding the tree structure properly, I explained my issue in previous comment and attached plunker, Can you please give me a workaround :) thank you

[PaulL1]

Try this: http://plnkr.co/edit/mEYRRxByQHCEsgXm9tVY?p=preview

[vijender1256]

@PaulL1 Thank you Very much Paul, I made couple of changes to the javascript to make it work, please let me know your thoughts, I am adding plunker just in case to help someone who is having same issues. This updated plunker is working :)

http://plnkr.co/edit/3OgMuuZ7Fl4ar2Kmfi2A?p=preview

[PaulL1]

THanks,