ng-grid was not intended for nested meshes: or even a dynamic cell height cell
If you look at the ng-grid ui-grid.html , you will see that the size is fixed in pixels:
height: {{ grid.options.rowHeight }}px;
This CSS class is built into the template, leaving no room for rewriting to "auto". Because meshes are built using Div's rather than Tables , tabular relationships between rows and columns are difficult if each cell-div is free to decide its own behavior. Thus, nested lattices are a rather difficult task.
You CAN get the desired hack effect that resembles nested grids :
Rolled up mesh 
Note: A carriage has been added to indicate that parent lines are extensible. I did not add logic to hide operands for parent strings that have no children.
Extended grid
Modify your JSon to include a column for Test, Name and andd Score. Use columns for test names or student names / scores. use parent identifier for children and specify id for parents:
$scope.facdata = [{test: "Basic Physics Test", parentId:0,id:1,expanded:true}, {name: "NAME", Score: "SCORE",parentId:1,expanded:false}, {name: "John", Score: 77,parentId:1,expanded:false}, {name: "Jacob", Score: 66,parentId:1,expanded:false}, {name: "Jenny", Score: 94,parentId:1,expanded:false}, {test: "Advanced Physics Test",id:2, parentId:0,expanded:true}, {name: "NAME", Score: "SCORE",parentId:2,expanded:false}, {name: "Freddy", Score: 94,parentId:2,expanded:false}, {name: "Samantha", Score: 38,parentId:2,expanded:false}, {name: "Judy", Score: 100,parentId:2,expanded:false} ];
Set rowTemplate in the grid rowTemplate to use the ng-show directive for children in the expanded field
$scope.gridOptions = { data: 'facdata', columnDefs: [{field: 'id',displayName:'',width:20, cellTemplate:'<div ng-show="row.getProperty(\'id\')" ng-click="toggleExpansion(row.getProperty(col.field))"><i class="fa fa-caret-right"></i></div>'}, {field: 'test', displayName: ''}, {field: 'name', displayName:''}, {field:'Score', displayName:'', cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field)}}</div>'}], rowTemplate:'<div style="width: 600px" ng-show="row.getProperty(\'expanded\')"><div ng-repeat="col in renderedColumns" class="ngCell ">' + '<div ng-cell></div> </div></div>'
Add a ToggleSubReport function to control the display of embedded data
$scope.ToggleSubReport = function(id) { for (var i=0;i<$scope.facdata.length;++i){ if ($scope.facdata [i].parentId ===id){ $scope.facdata [i].expanded = !$scope.facdata [i].expanded; } } }
:
:
Tracking Amin Uddin (Original Poster)
1) Nested grids are not possible: That was your main question and goal. This is what you have put generosity on. But as you can see from github the source for the grid line height (defined in pixels) and the responses from ng-grid , this is not an option that they even represent. The height of the NG-Grid cell is not really dynamic, since the ng-grid is intended for matching rows of the size of divs , not table (which can more naturally change the size of the row and row-row).
2) Sub-Grid of the type that I showed you can really combine complex relationships between children:. You can concatenate arrays before serializing them (or split JSON strings). to arrays, then combine them). You must override the fields that I used for master-detail from the unimaginative id/parentid , which I used for PK/FK from 2 lists.