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..
Best Answer
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
If the following is the markup
<ag-grid-angular#agGridid="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.
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);}You can now automate grid height by setting the domLayout='autoHeight' property, or by calling api.setDomLayout('autoHeight')
reference Grid Auto Height
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 contentparams.api.resetRowHeights();};referenceAuto HeightAuto width
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.