ag-grid auto height for entire grid

Question

I can't find a good way to size the grid to fit all rows perfectly.

documentation only points to sizing by % or px.

Since I want it to size based on rows, I came up with the following function. Seem like im re-inventing the wheel, so maybe there is a better way?

getHeight(type:EntityType) {
    var c = this.Apis[type] && this.Apis[type].api && this.Apis[type].api.rowModel // get api for current grid
        ? this.Apis[type].api.rowModel.rowsToDisplay.length
        : -1;
    return c > 0
        ? (40+(c*21))+'px' // not perfect but close formula for grid height
        : '86%';
}

there has to be a less messy way..

Answer 1

I came across this solution:

• https://github.com/ag-grid/ag-grid/issues/801

There are 2 answers to this problem.

1) If you are using anything below v10.1.0, then you can use the following CSS to achieve the problem:

.ag-scrolls {
    height: auto !important;
}

.ag-body {
    position: relative !important;
    top: auto !important;
    height: auto !important;
}

.ag-header { 
    position: relative !important;
}

.ag-floating-top {
    position: relative !important;
    top: auto !important;
}

.ag-floating-bottom {
    position: relative !important;
    top: auto !important;
}

.ag-bl-normal-east,
.ag-bl-normal,
.ag-bl-normal-center,
.ag-bl-normal-center-row,
.ag-bl-full-height,
.ag-bl-full-height-center,
.ag-pinned-left-cols-viewport,
.ag-pinned-right-cols-viewport,
.ag-body-viewport-wrapper,
.ag-body-viewport {
    height: auto !important;
}

2) Anything above v10.1.0, there is now a property called 'domLayout'.

• https://www.ag-grid.com/javascript-grid-width-and-height/#autoHeight

Answer 2

If the following is the markup

<ag-grid-angular
  #agGrid
  id="myGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  [domLayout]="domLayout"
  [animateRows]="true"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

Note that [domLayout]="domLayout"

set it as this.domLayout = "autoHeight"; and you're done..

Ref:

https://www.ag-grid.com/javascript-grid-width-and-height/

https://next.plnkr.co/edit/Jb1TD7gbA4w7yclU

Hope it helps.