Ag-grid set autoheight in Master/Detail component

Question

Suppose we need to set the autoheight of an ag-grid component it can be done easily with setting gridOptions to domLayout="autoHeight". This works in a single component, but for master-detail (parent/children) component that heights can be expanded, this doesn't work.

Same issue : https://github.com/ag-grid/ag-grid/issues/205

I need to tweak deep into its css but still can't make it work,

Style reference: https://www.ag-grid.com/javascript-grid-styling/

Ag grid DOM Layout: https://www.ag-grid.com/javascript-grid-width-and-height/#gsc.tab=0

Example to reproduce : https://github.com/ag-grid/ag-grid-vue-example (see on Master/Detail)

It's either tweaking the gridOptions getRowheight or its embedded css

for the related css :

.ag-root {
/* set to relative, so absolute popups appear relative to this */
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
/* was getting some 'should be there' scrolls, this sorts it out */
  overflow: hidden;
}

.ag-body {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

https://github.com/ag-grid/ag-grid/blob/master/dist/styles/ag-grid.css

and a plunker inside:

https://www.ag-grid.com/javascript-grid-master-detail/#gsc.tab=0

Another clue from the author: https://www.ag-grid.com/javascript-grid-row-height/index.php#gsc.tab=0

Height for Pinned Rows Row height for pinned rows works exactly as per normal rows with one difference - it is not possible to dynamically change the height once set. However, this is easily got around by just setting the pinned row data again which resets the row heights. Setting the data again is not a problem for pinned rows as it doesn't impact scroll position, filtering, sorting or group open/closed> positions as it would with normal rows if the data was reset.

Answer 1

For anyone finding this question in late 2021 and beyond, there's now the detailRowAutoHeight property in the gridOptions which will achieve the results desired by the asker.

https://www.ag-grid.com/javascript-data-grid/master-detail-height/#auto-height

const gridOptions = {
    // dynamically set row height for all detail grids
    detailRowAutoHeight: true,

    // other grid options ...
}