21

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 height according to its content.

Following is the Plunker I have made, in this I have used cellTemplate to insert Education field, But I want to increase the row height according to education field detail.

http://plnkr.co/edit/tQJNpB?p=preview

According to this link it is not possible: [1]https://github.com/angular-ui/ng-grid/issues/157

But if anyone find the solution.....

Poonam Gokani
  • 375
  • 1
  • 4
  • 13

6 Answers6

21

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 {...}
...
Yair Tavor
  • 2,538
  • 1
  • 20
  • 16
  • Beware when using these styles with the virtualizationThreshold options - when it is exceeded, the viewport starts behaving strangely – link64 Mar 19 '14 at 00:52
  • Thanks Yair so you learned angular.js there :) how can I make the whole ng-grid height dynamic based on its content? – Dejell Apr 13 '14 at 16:54
  • Dejel - set ngViewport class to height:auto and overflow:visible; – Yair Tavor Apr 16 '14 at 15:37
  • This will not work as is with many of the grid features like row virtualization, dynamic grid height plugins etc. Most of the logic relies on fixed height rows. I'll post if I find a good plugin solution. – Chris Stephens May 12 '14 at 15:28
  • 1
    Other than row virtualization and dynamic grid height plugins, is there anything else this will break? If one could live without those, is this fine to use? – patorjk Jul 16 '14 at 23:00
  • 1
    After playing around a bit, it looks like the inner height and width of the graph become a little off and pinning doesn't seem to work correctly. – patorjk Jul 17 '14 at 00:42
  • Great stuff Yair. Question: do you have any idea how to get the cell to remain the same full size when the user clicks to edit it? Currently editing collapses the cell to the height of one line during edit. – Vern Jensen Mar 12 '15 at 01:50
  • Vern, can you post a plunker to demonstrate the problem? – Yair Tavor Mar 12 '15 at 14:13
  • Hi Yair, the CSS is working perfect in all other cases, but I'm facing problem with pinned columns. If the table is having first two columns pinned and table is having large number of columns(like 15-20), the cells content belongs to the a particular column get shifted under its left column. Please give some suggestion. – Sumit Tawal Sep 03 '15 at 12:13
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 viewPortHeight
  var viewportHeight = $('ngViewPort').height();
  var gridHeight = $('ngGrid').height();

  // set the .ngGridStyle or the first parent of my ngViewPort in current scope
  var 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 300
  if (finalHeight < minHeight) {
    finalHeight = minHeight;
  } else if (finalHeight > viewportHeight) {
    finalHeight = maxHeight;
  }

  $(".ngViewport").height(finalHeight);
}
Kabb5
  • 3,760
  • 2
  • 33
  • 55
user3250966
  • 139
  • 1
  • 13
  • This only works for one grid. Need to figure out how to get the scope of the current grid and then do this view port change. – user3250966 Feb 25 '14 at 17:44
2

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

jeffreynolte
  • 3,749
  • 11
  • 41
  • 64
1

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.

Chris Stephens
  • 2,164
  • 2
  • 17
  • 21
1

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>
kashyaphp
  • 309
  • 2
  • 6
0

it's not the sexiest thing in the world and I doubt it's that performant but this does the trick:

function flexRowHeight() {
    var self = this;
    self.grid = null;
    self.scope = null;
    self.init = function (scope, grid, services) {
        self.domUtilityService = services.DomUtilityService;
        self.grid = grid;
        self.scope = scope;

        var adjust = function() {
            setTimeout(function(){
                var row = $(self.grid.$canvas).find('.ngRow'),
                    offs;
                row.each(function(){
                    var mh = 0,
                        s = angular.element(this).scope();

                    $(this).find('> div').each(function(){
                        var h = $(this)[0].scrollHeight;
                        if(h > mh)
                            mh = h

                        $(this).css('height','100%');
                    });

                    $(this).height(mh)

                    if(offs)
                        $(this).css('top',offs + 'px');

                    offs = $(this).position().top + mh;
                    self.scope.$apply(function(){
                        s.rowHeight = mh;
                    });
                });
            },1);
        }

        self.scope.$watch(self.grid.config.data, adjust, true);
    }
}

execute using plugins in options:

plugins: [new flexRowHeight()]
btm1
  • 3,866
  • 2
  • 23
  • 26