UI-GRID - Dynamic Row Height - Alternatives

Question

I tried to get a cell to expand it's height dynamically.

Is there a way to adjust the height of a row(GridRow) after it is rendered?

If not, then I will try to use an expandable grid or tree in a grid.

Is it possible to display an expandable grid off a specific cell/column?

Currently I see all expandable grids/tree grids that take up the entire row below the parent.

Thanks

Answer 1

You can see an answer to the same question here: https://github.com/angular-ui/ng-grid/issues/3239#issuecomment-91045267

UI-Grid virtualizes the rows, meaning that it only renders a small subset of the data, and leaves everything that wouldn't be in view unrendered. This means the grid needs to know how tall every row is, so that it can calculate positioning.

If it had to measure every row when rendered this would cause the browser to repaint over and over and performance would be miserable.

You'll find that other virtualized tools (like Ionic's collection-repeat) have the same limitation.

Update:

To answer your second question: you can set a height property on the GridRow object (not your entity, you can use getRow from the grid API to get the GridRow object) and the grid will use this height when rendering the row.

And your third question: no, expandable is only built to work off entire rows. It might be possible to alter what sort of data is displayed in a sub-grid based on clicks in certain cells, but that would require some changes to the expandable code.

Answer 2

Add this css to your styles:

.ui-grid-viewport .ui-grid-cell-contents {
  word-wrap: break-word;
  white-space: normal !important;
}

.ui-grid-row, .ui-grid-cell {
  height: auto !important;
}

.ui-grid-row div[role=row] {
  display: flex ;
  align-content: stretch;
}