Agheet set autoheight in Master / Detail component

Question

Suppose we need to install the autoheight component of ag-grid, this can be done easily with installation gridOptionsin domLayout="autoHeight". This works in a single component, but for a master-detail (parent / children) component, the height of which can be extended, this will not work.

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

I need to delve into its css, but still can't get it to work,

Style Link: 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

Playback example: https://github.com/ag-grid/ag-grid-vue-example (see the "Master / Detail" section)

It either configures gridOptions getRowheightor inline css

for 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 plunker inside:

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

Another author’s key: https://www.ag-grid.com/javascript-grid-row-height/index.php#gsc.tab=0

- . , , , . , , , / , , .

Answer 1

.

getRowHeight: function (params) {
    if (params.node && params.node.detail) {
        var offset = 80;
        var allDetailRowHeight = params.data.callRecords.length * 28;
        return allDetailRowHeight + offset;
    } else {
        // otherwise return fixed master row height
        return 60;
    }
}

ag-grid.