ag-grid auto height for entire grid

17
votes

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..

6
ag-grid
This seems to be the right approach, though I don't see why you are doing the various checks on whether the api exists or not... Do you need to change the grid height after filtering? or are you just using this one time for the initial grid creation? - Jarod Moser
because api gets initialized with the grid during load time. can't be certain getHeight gets called after it is initialized properly. - Sonic Soul
if you use the onGridReady event, then you wouldn't need to check if the api exists since that fires only after it does exist. - Jarod Moser
I am binding this property to a UI element using [style.height]="getHeight()". it's up to that UI element to call this property whenever it needs to. not sure what onGridReady has to do with it - Sonic Soul
Are you changing the grid's height anytime that a filter is applied? - Jarod Moser

6 Answers

9
votes

I came across this solution:

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'.

3
votes

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.

0
votes

Add the following code on onGridReady function for auto width and auto height

onGridReady = params => {
   // Following line to make the currently visible columns fit the screen  
   params.api.sizeColumnsToFit();

   // Following line dymanic set height to row on content
   params.api.resetRowHeights();
};

reference Auto Height Auto width

0
votes
determineHeight() {
    setTimeout(() => {
      console.log(this.gridApi.getDisplayedRowCount());
      if (this.gridApi.getDisplayedRowCount() < 20) {
        this.gridApi.setDomLayout("autoHeight");
      }
      else {
        this.gridApi.setDomLayout("normal");
        document.getElementById('myGrid').style.height = "600px";
      }
    }, 500);
  }
0
votes

You can use ag-grid feature AutoHeight = true in the column Configuration. or if you want to calculate the height dynamically you should use getRowHeight() callback and create DOM elements like div and span, and add your text in it, then the div will give the OffsetHeight for it then you wont see any cropping of data/rows.

Hope this helps.

0
votes

You can now automate grid height by setting the domLayout='autoHeight' property, or by calling api.setDomLayout('autoHeight')

reference Grid Auto Height