Angular Ng-grid Row Height

is there any way to apply the height of the row in ng-grid according to its content. there is one option rowHeight which is changed the height of all row. But I want dynamic row he

Solution 1:

These classes will make the table act as actual table, using display table-row and table-cell.

.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;
}

Please note that this is supported by IE8 and up. It's also overriding the entire ng grid classes so it will be wise to use on a "need to" base:

#myTableId .ngCell {...}#myTableId .ngRow {...}
...

Solution 2:

Researching this discovered that in my fix should call anonymous function $scope.resizeViewPort whenever it makes change to ngGrid data or should be called whenever the viewport rows are updated.

Examples are after angular performs updates to the rows via data from the ng-grid module. I've found these steps useful in my anonymous function for height only:

$scope.resizeViewPort = function { // and the two steps below// retrieve viewPortHeightvar viewportHeight = $('ngViewPort').height();
  var gridHeight = $('ngGrid').height();

  // set the .ngGridStyle or the first parent of my ngViewPort in current scopevar viewportHeight = $('.ngViewport').height();
  var canvasHeight = $('.ngCanvas').height();
  var gridHeight = $('.ngGrid').height();

  alert("vp:" + viewportHeight + " cv:" + canvasHeight + " gh:" + gridHeight);
  var finalHeight = canvasHeight;
  var minHeight = 150;
  var maxHeight = 300;


  // if the grid height less than 150 set to 150, same for > 300 set to 300if (finalHeight < minHeight) {
    finalHeight = minHeight;
  } elseif (finalHeight > viewportHeight) {
    finalHeight = maxHeight;
  }

  $(".ngViewport").height(finalHeight);
}

Solution 3:

I wanted to chime in on this question. I have followed up on this example and have used the solution provided by getuliojr. This solution seems to work pretty well, note that you will have to clone the fork and build the source in order to use in your app. I have a plunker live of it working: http://plnkr.co/edit/nhujNRyhET4NT04Mv6Mo?p=preview

Note you will also need to add 2 css rules:

.ngCellText{
    white-space:normal !important;
    }

.ngVerticalBarVisible{
      height: 100%!important;
    }

I have yet to test this under significant load or cross-browser but will update with more once I do.

GH Repo for ng-grid with flexible height by getuliojr: https://github.com/getuliojr/ng-grid/commits/master

Solution 4:

None of these solutions will work completely. The height being fixed is assumed all through out the code. It is typical with row virtualization to assume this because you aren't loading up all the rows at once so its very difficult to tell the ultimate height of the grid. NGrid 3.0 is supposed to support dynamic row height but I'm not sure when it is expected to be ready.

Solution 5:

Adapt-Strap. Here is the fiddle.

It is extremely lightweight and has dynamic row heights.

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]"></ad-table-lite>