Clever Geek Handbook

UI-GRID - Dynamic Line Height - Alternatives

I tried to force the cell to dynamically increase its height.

Is there a way to adjust the row height (GridRow) after rendering it?

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

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

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

thank

+3


source to share


2 answers


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

UI-Grid virtualizes rows, which means that it only displays a small subset of the data and leaves anything that wouldn't be undeserved. This means that the grid needs to know how tall each row is in order for it to calculate positioning.

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

You will find that other virtualized tools (like the Ionic collection-repeat) have the same limitations.



Update

To answer your second question, you can set a property height

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 that height when rendering the row.

And your third question: no, extensible only to work with all strings. It might be possible to change what data is displayed in the subgrid based on clicks in certain cells, but this would require some changes to the extensible code.

+5


source


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;
}
+11


source






More articles:


All Articles