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,

[muei]

ui-grid need to improve practicality witch tree view component.I don't think ablove are nice solutions. Sometimes our data is array,only id and pid keys, not level,the level is usually calculated. For example :

[
    {id :1,pid:0,name:'xxx',lft:,rgt:....},
{id :2,pid:1,name:'xxx',lft:,rgt:....},
{id :3,pid:1,name:'xxx',lft:,rgt:....},
{id :4,pid:2,name:'xxx',lft:,rgt:....},
{id :6,pid:4,name:'xxx',lft:,rgt:....},
...
]

So change these data to like treeview is ui-grid's work,no need to do by user! I hope this can be support soon.

[MattiJarvinen]

@ohohco yeah I ended up using nested set trees too to get ancestors and descendants and whether node has children the easy way. https://en.wikipedia.org/wiki/Nested_set_model

[muei]

@MattiJarvinen-BA you use it in ui-grid?

[sushanthkamath]

Could you please guide me to "How to add child and keep its parent in expand state, when child gets added in angular UI grid" . Referring to same JSON structure hierarchical Json data .

I read addOrUse(ignore typo). Not sure how to use it. Can you paste a snippet, how to pass parent row and new row.

Really appreciate

[imbalind]

This issue is cclosed furthermore this is not the proper place to ask "how to" questions.

We highly recommend asking those kind of question on Stack Overflow.

[VinayOne]

Can anyone plz guide me to develop a treeview in ui-grid for the json data which I attached. Also I attached a screenshot of the tree structure how i want.

Thanks Vinay

response_data.txt

[BharathGoli]

@PaulL1 @vijender1256 ..is pagination working with tree view in UI grid ? When we expand the rows in tree view, the child rows are also getting counted thus some of the parent rows are pushed into next page.IS there a way that pagination can count only parent rows .

[PaulL1]

Not in the code as I last saw it – the two don’t really work together well. I’m sure it could be done, but it would require some changes to the code.

Thanks Paul

From: BharathGoli notifications@github.com Reply-To: angular-ui/ui-grid reply@reply.github.com Date: Monday, 9 January 2017 at 9:28 PM To: angular-ui/ui-grid ui-grid@noreply.github.com Cc: Paul Lambert paul@planar.id.au, Mention mention@noreply.github.com Subject: Re: [angular-ui/ui-grid] Ui-Grid TreeView with hierarchical Json data unable to bind properly (#3855)

@PaulL1https://github.com/PaulL1 @vijender1256https://github.com/vijender1256 ..is pagination working with tree view in UI grid ? When we expand the rows in tree view, the child rows are also getting counted thus some of the parent rows are pushed into next page.IS there a way that pagination can count only parent rows .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/angular-ui/ui-grid/issues/3855#issuecomment-271230886, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AFAXFXniNXSLuvE6_5CMxCq7NqhhNdE1ks5rQe-0gaJpZM4FLDeq.

[archit-goel01]

@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

@pauL1 or @vijender1256 Can anyone update this plunkr example to use it with json file with $http.get().then()<I mean version 1.6 or less>

Thanks in advance

[shreyashk]

@PaulL1https://github.com/PaulL1 pagination and the ui tree view don't seem to go hand in hand.Are you aware of anyway to make pagination working on the tree view? Thanks in Advance!

[miteshjha007]

https://plnkr.co/edit/vyKNfur8myemcwfj?preview

I have Update this Plunker now you can see how data flow works with tree view.