CODEWITHSUNDEEP
angularjs
Scott
Scott

Reputation: 1690

ui-grid (not ng-grid) can't get dynamic height working

I'm using the new ui-grid (rewrite of ng-grid) and simply cannot get the dynamic height working. I've looked at all the questions about this with regards to ng-grid but none of the answers seem to work. Has anyone been successful at doing this?

Upvotes: 1

Views: 627

Answers (2)

mrmbr007
mrmbr007

Reputation: 122

I've implemented an easy solution to this that dynamically changes the height based on only the VISIBLE rows.

My HTML looks like:

<div id="grid1" ui-grid="gridOptions" ui-grid-grouping ui-grid-exporter class="grid"></div>

In your controller add:

$scope.$watch('gridApi.core.getVisibleRows().length', function() {
    if ($scope.gridApi) {
        $scope.gridApi.core.refresh();
        var row_height = 30;
        var header_height = 31;
        var height = row_height * $scope.gridApi.core.getVisibleRows().length + header_height;
        $('.grid').height(height);
        $scope.gridApi.grid.handleWindowResize();
    }
});

And to turn off scrolling add the following line where gridOptions is initialized:

enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER,

Make sure uiGridConstants is passed into your controller:

angular.module('app').controller('mainController', function($scope, uiGridConstants) { ...

Hope this helps!

Upvotes: 1

Fasermaler
Fasermaler

Reputation: 943

For anyone ending up here on a mad search for something that works (like me), this did the trick for me on 3.0.0-RC.18-7774d30 based on https://github.com/angular-ui/ng-grid/issues/1735#issuecomment-61319601:

In controller

$scope.gridOptions = {
    ...,
    // just registering the api as usual
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
    }
};

// Called when fetching new rows from $http, but you could also use a $watch
// NOTE: using gridOptions.data.length makes the list too long for some reason
$scope.height = ((rows.length + 1) * 30) + 'px';
$scope.gridApi.grid.gridHeight = ((rows.length + 1) * 30);

In partial

<div ui-grid="gridOptions" class="grid" ng-style="{ 'height': height }" ></div>

I included this ui-grid-auto-resize you see in all other questions too at first, but it doesn't seem to be necessary with this hacky solution(?)

Upvotes: 1

Related Questions