Angular UI-Grid (new one) - Dynamic/Autosize Height Based on Rows

Question

How do I get the angular ui-grid (the new one) to resize based on the number of rows? Bonus question, up to a max height or maximum number of rows to show?

Answer 1

Here is complete dynamic UI-Grid Implementation.

Working with pagination options and grouping.

$scope.gridOptions = {
enableFiltering: true,
paginationPageSizes: [10, 25, 50, 100, 500],
paginationPageSize: 10,
onRegisterApi: function(gridApi) {
  $scope.gridApi = gridApi;
  $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200);
  $scope.gridApi.treeBase.on.rowExpanded(null, function(row) {
    updatePagination(row.treeNode.children.length);
  });
  $scope.gridApi.treeBase.on.rowCollapsed(null, function(row) {
    updatePagination(-row.treeNode.children.length);
  });
}

};

And the functions:

function updatePagination(rowsDifference) {
  //updating pagination will trigger singleFilter where the height is being reset
  $scope.gridOptions.paginationPageSizes = [$scope.gridOptions.paginationPageSize + rowsDifference, 25, 50, 100, 500];
  $scope.gridOptions.paginationPageSize = $scope.gridOptions.paginationPageSize + rowsDifference;
}
//you can name the function anything, I was doing global external filtering inside this, so just named this.
$scope.singleFilter = function(renderableRows) {
    $timeout(function() {
      var newHeight = ($scope.gridApi.grid.getVisibleRowCount() * 30) + 145;
      angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px');
    }, 10);
    return renderableRows;
  }

Don't forget to inject 'ui.grid.grouping', 'ui.grid.autoResize', 'ui.grid.pagination' dependencies

HTML

<div ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination ui-grid-grouping></div>

Working PLUNKER