Angular Ui-Grid Multi Level Nesting - angularjs

Question

I am using Angular Ui-grid.Trying to achieve multi level nesting in that. Some one have already raised the issue in uiGrid github. But that solution doesn't seems working.
I have changed the JSON like this. I am trying to form nested sub grid.
Below is my code
$scope.gridOptions = {
expandableRowTemplate: 'expandableRowTemplate.html',
enableGridMenu: true,
expandableRowHeight: 150,
paginationPageSizes: [5, 10, 15],
paginationPageSize: 5,
//subGridVariable will be available in subGrid scope
expandableRowScope: {
subGridVariable: 'subGridScopeVariable'
}
}
$scope.gridOptions.columnDefs = [
{ name: 'id', enableHiding: false },
{ name: 'name' },
{ name: 'age' },
{ name: 'address.city' }
];
$http.get('http://private-7a7085-getfriends1.apiary-mock.com/getfriends')
.success(function (data) {
for (i = 0; i < data.length; i++) {
//for(i = 0; i < 50; i++){
data[i].subGridOptions = {
columnDefs: [{ name: "Id", field: "id" }, { name: "Name", field: "name" }, { name: "Age", field: "id" }, { name: "Address", field: "name" }],
data: data[i].friends,
expandableRowTemplate: 'expandableRowTemplate1.html',
enableGridMenu: true,
expandableRowHeight: 150
}
for (j = 0; j < data[i].friends.length; j++) {
data[i].subNestedGridOptions = {
columnDefs: [{ name: "Id", field: "id" }, { name: "Name", field: "name" }, { name: "Age", field: "id" }, { name: "Address", field: "name" }],
data: data[i].friends[j].friends
}
}
}
$scope.gridOptions.data = data;
});
and second level nested html(expandableRowTemplate1.html) looks like
<div ui-grid="row.entity.subNestedGridOptions" style="height:150px;"></div>
When I pass data to ui-grid for second level nested grid, it throws undefined.
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 really helpful!

Answer 1

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:
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>
The top level grid defines an expandableRowTemplate in its gridOptions (angularJS) .
$scope.gridThreeLayer = { ........
expandableRowTemplate: '..your path.../expandableRowTemplate.html' }
The top level grid's expandableRowTemplate will contain a div tag that defines another "ui-grid" and has the directive "ui-grid-expandable".
<div ui-grid="row.entity.subGridOptions" ui-grid-expandable></div>
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
The expandableRowTemplate of the 2nd level grid needs to define a div tag 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>
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.