Dynamically increase ng-grid row height depending on content without additional plugins and jquery

Question

This question was already asked here Angular ng-grid row height

but that are all not satisfy my requirement if we use CSS to fix problem it affect page responsiveness and ng-grid's header functionalities like sort,etc .

.ngCell  {
  display : table-cell;
  height: auto !important;
  overflow:visible;
  position: static;
}

.ngRow {
  display : table-row;
  height: auto !important;
  position: static;
}

.ngCellText{
  height: auto !important;
  white-space: normal;
  overflow:visible;
}

there is any solution for this without affecting page responsiveness and have to solve by pure java script / angularjs/css

score 1 · Answer 1 · answered Jul 29 '15 at 16:49

I've implemented an easy solution to dynamically change the table's height strictly based on the visible rows. I am using Ui-Grid-Unstable v3.0

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!

Dynamically increase ng-grid row height depending on content without additional plugins and jquery

1 Answers1