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

Solution 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.

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

Comments

[domih]

This is the perfect, plain css solution. I had to add div.ui-grid-cell to overrule and make it work. Thanks!

[matt]

I tried setting height on the row, and nothing happened. I then tried setting grid.queueGridRefresh() afterward, and the height remained the same. It seems there might be something missing from this answer to make the solution work.

[c0bra]

@matt can you reproduce in a plunker?

[CAK2]

For ui-grid - v4.0.2 - 2016-12-30, this makes the grid row height dynamic. However, it presents another challenge: how to dynamically change the height of the grid to be the sum of its rows. I had set my grid row height for double lines. Now that many rows are single line, there's a big patch of white space at the bottom before the grid paging controls appear.

[CAK2]

For ui-grid - v4.0.2 - 2016-12-30, I found another challenge: if you enable row selection, it has no effect on the height of the left-most checkbox column. The checkbox cell height does not match the rest of the row and quickly become misaligned and useless.

[Cesar]

This doesn't work as expected when using pinned columns, since those columns are not in the same container.