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

Same issue :

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

Style reference: /

Ag grid DOM Layout: .tab=0

Example to reproduce : (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;
}

.css

and a plunker inside:

.tab=0

Another clue from the author: .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.

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

Same issue : https://github./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./javascript-grid-styling/

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

Example to reproduce : https://github./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./ag-grid/ag-grid/blob/master/dist/styles/ag-grid.css

and a plunker inside:

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

Another clue from the author: https://www.ag-grid./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.

• javascript
• css
• html-table
• vuejs2
• ag-grid

2 Answers 2

You can dynamically calculate row height.

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

You can find this example in official documentation of ag-grid.

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./javascript-data-grid/master-detail-height/#auto-height

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

    // other grid options ...
}