Expandable UI Grid example having multiple levels

[peter11015]

Is there and example of the expandable UI Grid having multiple levels beyond 2 levels? I have looked at the example code and being new to UI Grid, I do not see an obvious way to add the nesting in the subgrid to make this happen. Thanks

[jpuri]

You can achieve this by:

1. Using an expandable template which is in itself an expandable grid:

1. Data for each row has a subgrid option like this: data[i].subGridOptions = { columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ], data: data[i].friends, expandableRowTemplate: 'expandableRowTemplate.html', expandableRowHeight: 150 }

I hope that helps, let me know if you still need detailed example.

[peter11015]

Thanks Jyoti, I will give this a try and let you know.

From: Jyoti Puri [mailto:notifications@github.com]
Sent: Tuesday, January 27, 2015 10:25 PM
To: angular-ui/ng-grid
Cc: Smeal, Peter A
Subject: Re: [ng-grid] Expandable UI Grid example having multiple levels (#2648)

You can achieve this by:

1. Using an expandable template which is in itself an expandable grid:
2. Data for each row has a subgrid option like this: data[i].subGridOptions = { columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ], data: data[i].friends, expandableRowTemplate: 'expandableRowTemplate.html', expandableRowHeight: 150 }

I hope that helps, let me know if you need more detailed example.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2648#issuecomment-71782975.

[PaulL1]

Possible solution offered, no response for some time, assuming raiser has resolved their issue and closing.

[Abhi-joshi]

can't implement multilevel nesting of table with the above code

You can achieve this by:

1. Using an expandable template which is in itself an expandable grid:
   Data for each row has a subgrid option like this: data[i].subGridOptions = { columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ], data: data[i].friends, expandableRowTemplate: 'expandableRowTemplate.html', expandableRowHeight: 150 }

[ckreddy08]

Did this work for anybody?

[RonaldPrajval]

<div ui-grid="row.entity.subGridOptions" ui-grid-pinning ui-grid-expandable style="height:150px;"></div>

i added ui-grid-pinning ui-grid-expandable directives also to the expandableRowTemplate.html's grid div
It worked!

[dishant8]

@jpuri it would be helpful if you can provide a detailed example. Not able to find it anywhere.

[dishant8]

@RonaldPrajval can you share a plunker if you have got this?

[dineshnagarit]

@jpuri @RonaldPrajval Does any one have success till now to implement Expandable UI Grid with more then 2 or 3 levels. If yes please share plunker or fiddle or detailed explanation would be great!

[shamoh19]

@PaulL1 @jpuri @peter11015 @RonaldPrajval Have any one successfully implemented multi level nesting?? If so please share the example

[westfrontgames]

I have this working now. I assume you have constructed the proper data to bind at 3 levels. I assume that you have a 2 level grid working as well (parent grid's rows expand to show child grids). Here are the key few pieces I added to get this to work:

1. The top level grid has the directive ui-grid-expandable in the <div> tag that defines it. This is located in my html view.

<div ui-grid="gridThreeLayer" ui-grid-expandable></div>

1. The top level grid defines an expandableRowTemplate in its gridOptions (angularJS) .

$scope.gridThreeLayer = { ........
expandableRowTemplate: '..your path.../expandableRowTemplate.html' }

1. The top level grid's expandableRowTemplate will contain a <div>that defines another "ui-grid" and has the directive "ui-grid-expandable".

<div ui-grid="row.entity.subGridOptions" ui-grid-expandable></div>

1. The 2nd level grid has its subGridOptions and columnDefs built on the fly when the data is being bound in the angularJS (off an $http.get() for me). At this time, you need to specify an expandableRowTemplate property on that 2nd level grid which tells it to expand and show the 3rd level grid.

for (i = 0; i < response.data.length; i++) {
response.data[i].subGridOptions = { .....
columnDefs: [ ............],
data: response.data[i].IP, // note that this is my 2nd level of data objects - yours will differ
expandableRowTemplate: 'AngularApp/Templates/MultiLevelTemplate.html'
`

1. The expandableRowTemplate of the 2nd level grid needs to defind a <div> with a "ui-grid", instructing the grid to render a nested grid for each row. It does NOT need a directive for expanding (but you could add one to go 4 levels deep). Mine is called MultiLevelTemplate .

<div ui-grid="row.entity.subGridOptions"></div>

1. Now in the same angularJS block, where you are building each row's gridOptions and columnDefs on the fly, you need to go to another level of iterations through that level of the data. This will allow you to define the subGridOptions and columnDefs fo the 3rd level grid. So you are in the "i" loop, and starting an "x" loop within it. Note that in setting the data source, it is using my own 3 levels of data objects. You need to use your own there.

for (x = 0; x < response.data[i].IP.length; x++) {
response.data[i].IP[x].subGridOptions = {
columnDefs: [........],
response.data[i].IP[x].subGridOptions.data = response.data[i].IP[x].BOM; // my data

If you do all of the above, it should work correctly if your data is set up correctly.

[mywebnote]

Do you have the complete example on http://plnkr.co?