2.0: The easy way to modify row height dynamically？

[yuezheng]

Hello.
This my current grid show via ng-grid:

There some text was cut because it too long. I want to show unbroken data in each cell, so I add some style for grid:

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

After setted this style, the grid show like this:

The text show complete. But the style of grid goto irregularity.
Now I want achieve that effect:
In general, after the grid loaded, it show like the frist picture above. If one cell's text too long, when mouse hover or on click, then heighten the row which current cell at, so that it could display complete data.

Now, I binded click event at a cell, to get parent row element in JQuery, then change it css like above.
The code just like:

cellTemplate: '<div class=ngCellText ng-click="transform($event)" ng-bind="row.getProperty(col.field)"></div>'

$scope.transform = (event) ->
  clicked = angular.element(event.target)
  targetRow = clicked.closest('div[class^="ngCell"]').parents('div[class^="ngCell"]').parent()
  // TODO: set new css style for the targetRow

This way is very complex, and can not achiev effect I wanted.
Is there a simple solution？

[PaulL1]

Which version of the grid are you using? I had thought that it wasn't possible to have different row sizes per row, so I'm impressed with how far you've gotten.

What is the problem that you have - you say "the style of the grid go to irregularity" - does that mean you want all the rows the same height, and don't like some being a different height than others? If so, I think this is an easier thing to achieve than each row having their own height.

[yuezheng]

I am using ~2.0.12.
Yes, I want all rows in same height. If one row has excessive text, when click this row, its height change, and other row keep fixed height.

[PaulL1]

I think I successfully set row height on 2.x earlier, using a custom cell template. I don't have that original work to hand now (I've upgraded to 3.0), but I think some of these may help:

http://stackoverflow.com/questions/19116305/angularjs-ng-grid-how-to-set-row-or-cell-height

I think I was also setting a custom cell template to make it wrap within the cell:

cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text style="white-space: normal;">{{COL_FIELD}}</span></div>'

Does that give useful hints?

[edgar-slalom]

I'm currently using ui-grid - v3.0.7. I'm also looking for a way to have all rows at a set height and when someone clicks on the cell, then resize the row to auto-height and wrapping the cell contents. any ideas?

[hanishw]

Do we have a plunker for this? @yuezheng