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

It's just hack the example for each row have same sub rowcount.

  
Hello Plunker!
  

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

faculty.controller('facultycontroller', function facultycontroller($scope, $http, $window) {
  $scope.facdata = [{
    examname: 'test' 
  },{
    examname: 'test2'
  }];

  $scope.rowHeight = 30;

  $scope.updateGrid = function() {
      $scope.gridOptions = {
      data: 'facdata',
      rowHeight: $scope.fac1data.length * $scope.rowHeight,
      columnDefs: [
        {field: 'examname',displayName: 'Exam Name'},
        {field: '', displayName: 'Subjects' , cellTemplate: '
'
      }]
    };
  }

  $scope.fac1data = [{
    abc: 'value',
    def: 'value2'
  }, {
    abc: 'value3',
    def: 'value4'
  }, {
    abc: 'value1',
    def: 'value4'
  }, {
    abc: 'value2',
    def: 'value4'
  }, {
    abc: 'value34',
    def: 'value4'
  }, {
    abc: 'value34',
    def: 'value4'
  }, {
    abc: 'value23',
    def: 'value14'
  }, {
    abc: 'value433',
    def: 'value5554'
  }, {
    abc: 'value3555',
    def: 'value4878'
  }
  ];

  $scope.gridOptions1 = {
   headerRowHeight: 0,
    data: 'fac1data',
    rowHeight: $scope.rowHeight,
    columnDefs: [
      {  field: 'abc',    displayName: 'abc'    },
      { field: 'def',      displayName: 'def'   }]
  }

  $scope.updateGrid();

  $scope.fac1data = [{
    abc: 'value2',
    def: 'value4'
  }, {
    abc: 'value34',
    def: 'value4'
  }, {
    abc: 'value34',
    def: 'value4'
  }, {
    abc: 'value23',
    def: 'value14'
  }, {
    abc: 'value433',
    def: 'value5554'
  }, {
    abc: 'value3555',
    def: 'value4878'
  }
  ];

  $scope.updateGrid();

});

Plunker

Edit : If main row have different sub row count, it not work. I only have idea. Must be fork ui-grid, and redesign it to auto height. The official ui-grid is design fixed height at gridTemplate.html and use absolute top position.