Why nested ng-grid height does not work?

Question

I have a nested ng grid.

var faculty = angular.module(\'faculty\', [\'ngGrid\']);

faculty.controller(\'facultycontroller\', function facultycontroller($scope, $h         


        

Answer 1

ng-grid was not designed for nested grids: Or even dynamic height cell by cell

If you look ng-grid's template ui-grid.html you see that the size is fixed in pixels:

  height: {{ grid.options.rowHeight }}px;

see github

This CSS class is embedded in the template, leaving no room to over-write to "auto". Since grids are built with Div's rather than Tables, tabular relationships between rows and columns is difficult if every cell-div is free to decide it's own behavior. So nested grids are quite the challenge.

---

You CAN get the affect you want with a hack that resembles nested grids:

see plnkr

Collapsed Grid

note: The caret's have been added to show that parent rows are expandable. I have'nt added logic to hide carets for parent rows that have no children.

Expanded Grid

see plnkr

---

Alter your JSon to include a column for Test, Name, andd Score. Use columns for either Test names or Student Names/Scores. use parent id for children and give id's to 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}
                 ];

In Grid Options set rowTemplate to use ng-show directive on the children against the expanded field

$scope.gridOptions = { 
    data: 'facdata',
    columnDefs: [{field: 'id',displayName:'',width:20,
    cellTemplate:'
'},
                {field: 'test', displayName: ''},
                {field: 'name', displayName:''},
                 {field:'Score', displayName:'', 
                 cellTemplate: '
{{row.getProperty(col.field)}}
'}],
    rowTemplate:'
' +
                       '
 
'

Add a ToggleSubReport function to manage showing the 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;
    }
  }
}

see plnkr

:

:

---

Followup for Amin Uddin (Original Poster)

1) Nested Grids are not possible: This was your main question and aim. This is what you put a bounty on. But as you can see from github sourcefor grid-row height (defined in pixels) and responses from ng-grid contributors, this is not an option yet they even envision. NG-Grid's cell height is not truly dynamic because ng-grid is designed around matching sized divs rows rather than a table (which can more naturally re-size rows and row-cells).

2) A Sub-Grid of the kind I showed you really can accomodate sophisticated master-child relationships: You can merge arrays before serializing them (or parse JSON strings to arrays, then merge them). You must redefine the fields I used for master-detail from the unimaginative id/parentid I used to the PK/FK of the 2 lists.